body{
  font-family: Inter, sans-serif;
  margin:0;
  background:#f6f8fc;
  color:#0b1220;
}
.container{width:min(1100px, 92vw); margin:0 auto;}
.topbar{background:white; border-bottom:1px solid #e5e9f0; padding:14px 0;}
.topbar__inner{display:flex; justify-content:space-between; align-items:center;}
.topnav{display:flex; gap:14px;}
.topnav__link{color:#5f6b7a; text-decoration:none;}
.topnav__link:hover{color:#2563eb;}
.hero{text-align:center; padding:60px 0;}
.hero h1{font-size:48px; margin:0;}
.hero__sub{color:#5f6b7a; margin:10px 0 20px;}
.btn{padding:12px 16px; border-radius:8px; text-decoration:none;}
.btn--primary{background:#2563eb; color:white;}
.card{background:white; padding:20px; margin:20px 0; border-radius:12px; border:1px solid #e5e9f0;}
.portfolioGrid, .servicesGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:14px;}
.work{border:1px solid #e5e9f0; border-radius:10px; overflow:hidden;}
.work__thumb{height:120px; background:linear-gradient(135deg,#dbeafe,#eef2ff);}
.work__meta{padding:10px;}
.muted{color:#5f6b7a; font-size:14px;}
.service{border:1px solid #e5e9f0; border-radius:10px; padding:14px;}
.price{font-weight:800; margin-top:8px;}


.sectionHead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.pill{background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe; padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px;}
.servicesToolbar{display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap;}
.servicesSearchWrap{position:relative; flex:1; min-width:220px;}
.servicesSearch{width:100%; padding:11px 12px 11px 34px; border-radius:10px; border:1px solid #e5e9f0; background:#fff; font-size:14px; outline:none;}
.servicesSearch:focus{border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.servicesSearchIcon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-weight:700;}
.btn--ghost{background:transparent; border:1px solid #e5e9f0; color:#334155;}
.btn--ghost:hover{border-color:#cbd5e1;}
.btn--soft{background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8;}
.btn--soft:hover{background:#dbeafe;}
.service p{margin:8px 0 0; color:#5f6b7a; font-size:14px; line-height:1.35;}


/* v5 enhancements */
.service__badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--primary);background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.18);padding:6px 10px;border-radius:999px;margin-bottom:10px}
.service__footer{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.service__meta{font-size:12px;color:var(--muted)}
.tiers{margin-top:12px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,.02));}
.tierRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;font-size:13px;}
.tierRow + .tierRow{border-top:1px solid rgba(15,23,42,.08)}
.tierLabel{color:var(--muted);font-weight:600}
.tierPrice{font-weight:800;letter-spacing:.2px}
.servicesSortWrap{display:flex;align-items:center;gap:8px;margin-left:auto}
.servicesSort{height:40px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);padding:0 12px}
.servicesSortLabel{font-size:12px}
@media (max-width: 720px){.servicesSortWrap{width:100%;justify-content:space-between}}


/* Pagination */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top: 18px;
  flex-wrap:wrap;
}
.pageBtn, .pageNav{
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding:8px 12px;
  border-radius: 10px;
  cursor:pointer;
  font-weight:600;
  min-width: 40px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
}
.pageBtn:hover, .pageNav:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
}
.pageBtn.is-active{
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.pageNav[disabled], .pageBtn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ---- v11 layout helpers ---- */
.topbar{position:sticky; top:0; z-index:20}
.topbar{padding:14px 0}
.brand{width:min(1100px,92vw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand-title{font-size:28px; letter-spacing:.5px}
.brand-strong{font-weight:900; color:#2563eb}
.brand-year{font-weight:500; color:#94a3b8; margin-left:2px}
.nav{display:flex; gap:18px}
.nav-link{color:#5f6b7a; text-decoration:none; font-weight:600}
.nav-link:hover{color:#2563eb}

.hero{padding:26px 0 12px; text-align:left}
.hero-title{margin:0; font-size:32px}
.hero-sub{margin:6px 0 0; color:#5f6b7a}

.panel{background:#fff; border:1px solid #e5e9f0; border-radius:16px; padding:18px; margin:18px 0; box-shadow:0 10px 22px rgba(15,23,42,.04)}
.panel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.panel-title{margin:0; font-size:18px}
.panel-sub{margin:4px 0 0; color:#64748b; font-size:14px}

.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0}
.search{position:relative; flex:1; min-width:240px}
.search-ico{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#94a3b8}
#q{width:100%; padding:11px 12px 11px 34px; border:1px solid #e5e9f0; border-radius:12px; outline:none; font-size:14px}
#q:focus{border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.sort{display:flex; align-items:center; gap:8px}
.sort-label{color:#64748b; font-size:14px}
#sort{padding:10px 12px; border:1px solid #e5e9f0; border-radius:12px; background:#fff}

.btn{border:1px solid #e5e9f0; background:#fff; color:#0b1220; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:700}
.btn:hover{border-color:#cbd5e1}
.btn.primary{background:#2563eb; border-color:#2563eb; color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.btn.small{padding:9px 10px; font-weight:800}

.grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width: 640px){.grid{grid-template-columns:1fr;}}

.card{background:#fff; border:1px solid #e5e9f0; border-radius:18px; padding:18px; box-shadow:0 12px 24px rgba(15,23,42,.06); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(15,23,42,.10)}

/* El chip de categoría se eliminó del HTML. Si existe en otro lado, lo ocultamos. */
.chip{display:none !important}

.card-body{flex:1 1 auto; display:flex; flex-direction:column; gap:10px}
.card-title{margin:0 0 6px; font-size:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-desc{margin:0; color:#475569; line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}

.tier{margin:10px 0 8px}
.tier-btn{border:0; background:transparent; color:#64748b; font-weight:800; cursor:pointer; padding:8px 10px; border-radius:10px}
.tier-btn.active{background:#eff6ff; color:#1d4ed8}
.tier-bar{height:6px; background:#e5e9f0; border-radius:999px; position:relative; overflow:hidden; margin-top:6px}
.tier-bar span{--pos:1; position:absolute; top:0; left:0; height:100%; width:33.333%; transform:translateX(calc(var(--pos) * 100%)); background:#2563eb; border-radius:999px}

.card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid #e5e9f0}
.price-main{font-size:22px; font-weight:950; letter-spacing:.2px}
.price-sub{display:block; margin-top:2px; color:#64748b; font-size:12px; font-weight:700}

.empty{padding:14px; border:1px dashed #cbd5e1; border-radius:14px; color:#64748b; text-align:center}

.pagination{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px}
.pg{width:38px; height:38px; border-radius:12px; border:1px solid #e5e9f0; background:#fff; cursor:pointer; font-weight:900}
.pg:disabled{opacity:.5; cursor:not-allowed}
.pg-pages{display:flex; gap:8px}
.pg-num{width:38px; height:38px; border-radius:12px; border:1px solid #e5e9f0; background:#fff; cursor:pointer; font-weight:900}
.pg-num.active{background:#2563eb; border-color:#2563eb; color:#fff}

.contact{display:flex; align-items:center; gap:10px; flex-wrap:wrap}


/* ===== Premium / minimal polish ===== */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.10);
  --shadow: 0 12px 40px rgba(15,23,42,.08);
  --shadow-sm: 0 8px 24px rgba(15,23,42,.06);
  --radius: 18px;
}

body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.12), transparent 60%),
              radial-gradient(900px 500px at 85% 10%, rgba(99,102,241,.10), transparent 55%),
              var(--bg);
}

.container{ max-width: 1180px; }

.topbar{
  backdrop-filter: blur(12px);
  background: rgba(246,247,251,.78);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}

.topnav a{
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(15,23,42,.72);
  font-weight: 650;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.topnav a:hover{ background: rgba(37,99,235,.08); color: var(--text); transform: translateY(-1px); }

.section{ padding: 64px 0; }
.section--alt{ background: transparent; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.section-head h2{ margin:0; letter-spacing:-.02em; }
.section-head p{ margin:0; max-width: 640px; }

.muted{ color: var(--muted); }

.card, .service-card, .info-card, .contact-form, .contact-card, .portfolio-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.service-card{
  background: var(--card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.service-title{
  min-height: 3.1em; /* alinear títulos */
}
.service-desc{
  min-height: 4.2em; /* alinear descripciones */
}

.tier-switch{
  gap: 10px;
}
.tier-switch button{
  border-radius: 999px;
}

.btn{
  border-radius: 999px;
}

.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .portfolio-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .portfolio-grid{ grid-template-columns: 1fr; }
}
.portfolio-card{
  display:block;
  overflow:hidden;
  background: var(--card);
  text-decoration:none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.portfolio-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.portfolio-thumb{
  height: 140px;
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(99,102,241,.18));
}
.portfolio-meta{ padding: 14px; }
.portfolio-meta h3{ margin:0 0 6px 0; font-size: 1rem; }
.portfolio-meta p{ margin:0; font-size: .95rem; }

.cards-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 760px){
  .cards-2{ grid-template-columns: 1fr; }
}
.info-card{ background: var(--card); padding: 18px; }
.info-card__title{ font-weight: 700; margin-bottom: 10px; }
.info-card__price{ font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.info-card__note{ margin-top: 8px; }

.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}
.contact-card{ background: var(--card); padding: 18px; }
.contact-aside .aside-card{ background: var(--card); padding: 18px; }
.contact-title,.aside-title{ margin: 0 0 8px 0; }
.contact-actions{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; margin-top: 6px; }
.contact-status{ min-height: 20px; margin-top: 10px; color: var(--muted); font-weight: 600; }
.contact-email a{ color: var(--primary); font-weight: 750; }
.contact-bullets{ margin: 12px 0 0 18px; color: var(--muted); }
.contact-form{ background: var(--card); padding: 18px; }
.field{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 12px; }
.field label{ font-weight: 600; font-size: .95rem; color: var(--text); }
.field input, .field textarea{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,.9);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.status{ margin: 10px 0 0 0; }
.fine{ font-size: .9rem; margin-top: 8px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* ===== inesdesign v15 (home + precios) ===== */
:root{
  --bg:#f6f8ff;
  --surface:#ffffff;
  --text:#0b1020;
  --muted:#5c647a;
  --primary:#2f6bff;
  --primary2:#7c5cff;
  --ring:rgba(47,107,255,.18);
  --shadow: 0 10px 30px rgba(11,16,32,.08);
  --shadow2: 0 6px 18px rgba(11,16,32,.08);
  --radius: 18px;
}

html{ scroll-behavior:smooth; }
body{ background: radial-gradient(1200px 600px at 10% -10%, rgba(47,107,255,.18), transparent 55%),
              radial-gradient(900px 500px at 90% 0%, rgba(124,92,255,.14), transparent 55%),
              var(--bg);
}

.no-scroll{ overflow:hidden; }

.container{ max-width: 1180px; }

/* Topbar */
.topbar{
  position: sticky; top:0; z-index: 50;
  background: rgba(246,248,255,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20,30,60,.06);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 0; }

.brand{ display:flex; align-items:baseline; gap:2px; text-decoration:none; font-weight:800; letter-spacing:-.02em; }
.brand__mark{ color: var(--primary); font-size: 20px; }
.brand__mark--alt{ color: rgba(11,16,32,.75); font-size: 20px; }

.nav{ display:flex; gap: 18px; }
.nav a{ text-decoration:none; color: rgba(11,16,32,.72); font-weight:600; padding: 10px 10px; border-radius: 12px; }
.nav a:hover{ background: rgba(47,107,255,.08); color: rgba(11,16,32,.9); }

.navbtn{ display:none; width:44px; height:44px; border-radius: 14px; border:1px solid rgba(20,30,60,.10); background: rgba(255,255,255,.7); box-shadow: var(--shadow2); }
.navbtn span{ display:block; width:18px; height:2px; background: rgba(11,16,32,.70); margin: 0 auto 4px; border-radius: 10px; }
.navbtn span:last-child{ margin-bottom:0; }

/* Drawer */
.drawer{ position:fixed; inset:0; display:none; z-index:60; }
.drawer.is-open{ display:block; }
.drawer__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.32); }
.drawer__panel{
  position:absolute; right:16px; top:16px;
  width:min(420px, calc(100% - 32px));
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border:1px solid rgba(20,30,60,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding: 6px 4px 10px; }
.drawer__brand{ font-weight:800; color: rgba(11,16,32,.80); }
.drawer__close{ width:40px; height:40px; border-radius: 14px; border:1px solid rgba(20,30,60,.10); background: rgba(255,255,255,.9); }
.drawer__links{ display:flex; flex-direction:column; gap:8px; padding: 6px 0 12px; }
.drawer__links a{ padding: 12px 12px; border-radius: 16px; text-decoration:none; font-weight:700; color: rgba(11,16,32,.78); background: rgba(47,107,255,.06); }
.drawer__links a:hover{ background: rgba(47,107,255,.10); }
.drawer__cta{ display:flex; gap:10px; }

/* Buttons */
.btn{ border-radius: 14px; padding: 12px 14px; font-weight:700; border:1px solid rgba(20,30,60,.10); background: rgba(255,255,255,.92); }
.btn--primary{ background: linear-gradient(135deg, var(--primary), var(--primary2)); color:#fff; border:none; box-shadow: 0 14px 34px rgba(47,107,255,.24); }
.btn--ghost{ background: rgba(255,255,255,.60); }
.btn--full{ width:100%; justify-content:center; display:inline-flex; }
.btn.small{ padding: 10px 12px; border-radius: 12px; }
.link{ color: var(--primary); text-decoration:none; font-weight:700; }
.link:hover{ text-decoration:underline; }

.pill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; background: rgba(47,107,255,.08); border: 1px solid rgba(47,107,255,.14); color: rgba(11,16,32,.75); font-weight:700; }

/* Hero */
.hero{ position:relative; padding: 46px 0 26px; overflow:hidden; }
.hero__inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items:center; }
.hero h1{ font-size: clamp(34px, 4vw, 54px); line-height: 1.03; letter-spacing:-.03em; margin: 10px 0 10px; }
.lead{ font-size: 18px; color: rgba(11,16,32,.70); max-width: 52ch; }
.hero__actions{ display:flex; gap: 12px; margin-top: 18px; flex-wrap:wrap; }
.hero__trust{ margin-top: 14px; display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.hero__bg{ position:absolute; inset:-40px; background: radial-gradient(700px 240px at 20% 30%, rgba(47,107,255,.20), transparent 60%),
          radial-gradient(700px 240px at 70% 50%, rgba(124,92,255,.16), transparent 60%); pointer-events:none; opacity:.65; }

.glasscard{ background: rgba(255,255,255,.78); border:1px solid rgba(20,30,60,.10); border-radius: 26px; box-shadow: var(--shadow); overflow:hidden; }
.glasscard__top{ display:flex; gap:8px; padding: 14px 16px; border-bottom:1px solid rgba(20,30,60,.06); }
.dot{ width:10px; height:10px; border-radius:999px; opacity:.85; }
.dot--a{ background: #ff5c5c; }
.dot--b{ background: #ffb020; }
.dot--c{ background: #22c55e; }
.glasscard__content{ padding: 18px 16px 16px; display:grid; gap: 10px; }
.kpi{ display:flex; align-items:baseline; justify-content:space-between; padding: 12px 12px; border-radius: 16px; background: rgba(47,107,255,.06); border:1px solid rgba(47,107,255,.10); }
.kpi__label{ color: rgba(11,16,32,.64); font-weight:700; }
.kpi__value{ font-weight:900; letter-spacing:-.02em; }
.sparkline{ height: 46px; border-radius: 16px; background: linear-gradient(90deg, rgba(47,107,255,.12), rgba(124,92,255,.10)); border:1px solid rgba(20,30,60,.06); }

/* Sections */
.section{ padding: 42px 0; }
.section--alt{ background: rgba(255,255,255,.55); border-top: 1px solid rgba(20,30,60,.05); border-bottom: 1px solid rgba(20,30,60,.05); }
.section__head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 18px; margin-bottom: 18px; }
.section__head h2{ margin:0; letter-spacing:-.02em; }
.section__head p{ margin:0; max-width: 70ch; }

.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card{ background: rgba(255,255,255,.86); border:1px solid rgba(20,30,60,.10); border-radius: var(--radius); box-shadow: var(--shadow2); }
.card--soft{ background: rgba(255,255,255,.72); }
.card h3{ margin-top:0; letter-spacing:-.02em; }

.check{ padding-left: 18px; color: rgba(11,16,32,.70); }
.check li{ margin: 8px 0; }

.portfolio{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pitem{ text-decoration:none; color: inherit; border-radius: 22px; overflow:hidden; background: rgba(255,255,255,.84); border:1px solid rgba(20,30,60,.10); box-shadow: var(--shadow2); }
.pitem__thumb{ height: 160px; background: linear-gradient(135deg, rgba(47,107,255,.18), rgba(124,92,255,.14)); }
.pitem__thumb--2{ background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(47,107,255,.10)); }
.pitem__thumb--3{ background: linear-gradient(135deg, rgba(47,107,255,.12), rgba(17,24,39,.06)); }
.pitem__meta{ padding: 14px; }
.pitem__title{ font-weight:800; letter-spacing:-.02em; }

.contact{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items:start; }
.form{ padding: 16px; }
.form__row{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 12px; }
.form__row label{ font-weight:700; color: rgba(11,16,32,.78); }
.form input, .form textarea{
  border-radius: 14px; border:1px solid rgba(20,30,60,.12);
  padding: 12px 12px; background: rgba(255,255,255,.92);
  outline:none;
}
.form input:focus, .form textarea:focus{ box-shadow: 0 0 0 6px var(--ring); border-color: rgba(47,107,255,.36); }
.form__actions{ display:flex; align-items:center; gap: 12px; }
.sidecard{ padding: 16px; border-radius: var(--radius); background: rgba(255,255,255,.70); border: 1px solid rgba(20,30,60,.10); box-shadow: var(--shadow2); }
.sidecard__title{ font-weight:900; letter-spacing:-.02em; margin-bottom: 8px; }
.sidecard__chips{ display:flex; gap: 8px; flex-wrap:wrap; margin: 12px 0 14px; }
.chip{ padding: 8px 10px; border-radius: 999px; background: rgba(47,107,255,.08); border:1px solid rgba(47,107,255,.14); font-weight:700; color: rgba(11,16,32,.74); }

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px; margin-bottom: 16px; }
.toolbar input[type="search"]{ width:min(640px, 100%); }
.select{ display:flex; align-items:center; gap: 8px; }
.select select{ border-radius: 14px; border:1px solid rgba(20,30,60,.12); padding: 10px 12px; background: rgba(255,255,255,.92); font-weight:700; }

.cards--prices{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.card[data-title]{ display:flex; flex-direction:column; min-height: 320px; }
.card-body{ padding: 16px 16px 0; flex: 1; }
.card-title{ margin: 0 0 8px; font-size: 18px; letter-spacing:-.02em; }
.card-desc{ margin: 0; color: rgba(11,16,32,.66); line-height: 1.45; }
.card-foot{
  margin-top:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap: 14px;
  padding: 16px;
  border-top: 1px solid rgba(20,30,60,.06);
}
.price-main{ font-weight: 950; font-size: 28px; letter-spacing:-.03em; }
.price-sub{ display:block; margin-top: 4px; color: rgba(11,16,32,.58); font-weight:800; font-size: 12px; }

.tier{ margin-top: 14px; }
.tier-btn{ border-radius: 12px; border: 1px solid rgba(20,30,60,.10); background: rgba(255,255,255,.86); padding: 9px 10px; font-weight:800; }
.tier-btn.active{ background: rgba(47,107,255,.10); border-color: rgba(47,107,255,.20); color: rgba(11,16,32,.85); }
.tier-bar{ margin-top: 10px; height: 6px; background: rgba(20,30,60,.10); border-radius: 999px; position:relative; overflow:hidden; }
.tier-bar span{ position:absolute; inset:0; width: 33.33%; transform: translateX(calc(var(--pos) * 100%)); background: linear-gradient(90deg, var(--primary), var(--primary2)); border-radius: 999px; transition: transform .24s ease; }

.pager{ display:flex; align-items:center; justify-content:center; gap: 10px; margin-top: 18px; }
.pager__nums{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:center; }
.pager__nums button{ min-width: 42px; }
.empty{ padding: 16px; text-align:center; }
.note{ margin-top: 14px; }

.footer{ padding: 28px 0; background: rgba(255,255,255,.55); border-top: 1px solid rgba(20,30,60,.05); }
.footer__inner{ display:grid; grid-template-columns: 1fr auto; gap: 16px; align-items:start; }
.footer__links{ display:flex; gap: 14px; flex-wrap:wrap; justify-content:flex-end; }
.footer__links a{ text-decoration:none; color: rgba(11,16,32,.70); font-weight:700; }
.footer__brand{ font-weight:900; letter-spacing:-.03em; }

/* Reveal animation */
.reveal{ opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.reveal.inview{ opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .portfolio{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .cards--prices{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .navbtn{ display:inline-flex; align-items:center; justify-content:center; }
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__links{ justify-content:flex-start; }
}


/* v16 overrides */
.topbar{position:sticky;top:0;z-index:50;background:rgba(245,247,255,.72);backdrop-filter: blur(16px);border-bottom:1px solid rgba(15,23,42,.06)}
.topbar__inner{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand__name{font-weight:800;letter-spacing:-.04em;font-size:20px;text-transform:uppercase}
.brand__name--alt{color:var(--primary);font-weight:800}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.nav a{white-space:nowrap;padding:10px 12px;border-radius:12px;transition:transform .15s ease, background .15s ease, color .15s ease}
.nav a:hover{background:rgba(37,99,235,.08);transform:translateY(-1px)}
.nav a.active{background:rgba(37,99,235,.10);color:var(--primary)}

/* Subtle depth */
.card, .price-card, .portfolio-card, .toolbar-card{box-shadow:0 10px 30px rgba(2,6,23,.06)}
.card:hover, .price-card:hover, .portfolio-card:hover{box-shadow:0 18px 45px rgba(2,6,23,.10)}
.section{padding:64px 0}
.hero__card{box-shadow:0 18px 60px rgba(2,6,23,.10)}

/* Prices toolbar: more compact + aligned */
.toolbar-card{padding:18px}
.toolbar-grid{grid-template-columns:1.4fr auto auto;gap:14px}
.toolbar-search label{font-size:13px;color:var(--muted);margin-bottom:8px}
.toolbar-search input{height:44px}
.toolbar-actions{display:flex;gap:10px;align-items:flex-end}
.toolbar-actions .btn{height:44px}
.toolbar-sort{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toolbar-sort select{height:44px}

/* Home services preview */
.service-preview{padding:18px;border-radius:20px;border:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.78);backdrop-filter: blur(8px)}
.service-preview h3{margin:0 0 8px;font-size:18px;letter-spacing:-.02em}
.service-preview p{margin:0;color:var(--muted);line-height:1.55}

/* Responsive: prevent nav wrapping; go to drawer earlier */
@media (max-width: 980px){
  .nav{display:none}
  .navbtn{display:inline-flex}
}