/* =========================================================================
   SITE V2 — additive components for the modular router homepage.
   Everything else (header, hero, pricing, how-it-works, trust, FAQ, contact,
   footer, the video portfolio grid) reuses css/styles.css and
   css/portfolio-v3.css unchanged. This file only covers what's new:
   service cards, the Work tabs, the one-system flow, and the fictional
   website-concept cards.
   ========================================================================= */

/* ---------- Section 2: service cards ---------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.service-grid.is-3col{grid-template-columns:repeat(3,1fr);}
.service-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 22px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
  text-decoration:none;
  color:inherit;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.service-card:hover{border-color:rgba(226,189,100,.32);transform:translateY(-3px);}
.service-card-num{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;}
.service-card h3{font-size:19px;letter-spacing:-.02em;}
.service-card p{font-size:14px;line-height:1.55;color:var(--text-2);flex:1;}
.service-card-anchor{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);}
.service-card-price{font-size:12.5px;color:var(--text-3);}
.service-card.is-flagship{border-color:var(--gold-tint-2);background:linear-gradient(180deg,rgba(197,154,60,.08),rgba(197,154,60,.015) 55%,rgba(255,255,255,.01));}

/* ---------- Section 3: Work tabs ---------- */
.work-tabs{display:flex;gap:8px;margin:0 0 34px;}
.work-tab{
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:var(--font);
}
.work-tab[aria-selected="true"]{border-color:rgba(226,189,100,.4);color:var(--text);background:rgba(197,154,60,.1);}
.work-panel{display:none;}
.work-panel.is-active{display:block;animation:workFade .28s ease;}
@keyframes workFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Website concept showcase ---------- */
.concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.concept-card{
  display:flex;
  flex-direction:column;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.014);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.concept-card:hover{border-color:rgba(226,189,100,.3);transform:translateY(-4px);}
.concept-frame{
  position:relative;
  aspect-ratio:4/3;
  background:#0b0d11;
  overflow:hidden;
}
.concept-frame .browser-bar{
  display:flex;align-items:center;gap:5px;
  padding:9px 12px;background:#12161d;border-bottom:1px solid rgba(255,255,255,.06);
}
.concept-frame .browser-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);display:block;}
.concept-frame img,.concept-frame svg{width:100%;height:calc(100% - 30px);display:block;object-fit:cover;}
.concept-chip{
  position:absolute;top:38px;left:10px;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#07090D;background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  padding:4px 9px;border-radius:100px;
}
.concept-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;}
.concept-type{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.concept-title{font-size:18px;letter-spacing:-.02em;}
.concept-points{display:flex;flex-direction:column;gap:5px;margin-top:2px;}
.concept-points li{position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:var(--text-3);}
.concept-points li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.75;}
.concept-cta{margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);}

/* ---------- Section 4: one-system flow ---------- */
.flow-steps{display:flex;align-items:stretch;gap:0;}
.flow-step{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:24px 20px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.014);
}
.flow-step-num{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;}
.flow-step h3{font-size:17px;letter-spacing:-.015em;}
.flow-step p{font-size:13.5px;color:var(--text-3);line-height:1.5;}
.flow-arrow{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  width:44px;color:var(--gold);opacity:.6;
}
.flow-arrow svg{width:20px;height:20px;}
.flow-cta{
  margin-top:22px;
  padding:18px 22px;
  border-radius:var(--radius);
  border:1px solid rgba(226,189,100,.24);
  background:rgba(197,154,60,.06);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.flow-cta p{font-size:15px;color:var(--text);margin:0;}
.flow-cta strong{color:var(--gold-hi);}

/* ---------- Packages: flagship note on the Full Revenue Build card ---------- */
.price-scope-note{font-size:12px;color:var(--text-3);margin-top:2px;}

@media(max-width:1024px){
  .service-grid,.service-grid.is-3col{grid-template-columns:repeat(2,1fr);}
  .concept-grid{grid-template-columns:repeat(2,1fr);}
  .flow-steps{flex-wrap:wrap;}
  .flow-arrow{width:100%;transform:rotate(90deg);padding:2px 0;}
}

@media(max-width:760px){
  .service-grid,.service-grid.is-3col{grid-template-columns:1fr;}
  .concept-grid{grid-template-columns:1fr;}
  .work-tabs{gap:6px;}
  .work-tab{padding:9px 14px;font-size:13px;}
  .flow-steps{flex-direction:column;}
  .flow-arrow{width:100%;}
}