/* Web Development (page-specific) — uses tokens from index.css */

/* Hero */
.wd-hero .subhead { color: var(--text-gray); max-width: 820px; }
.badge,
.wd-hero .badge {
  display:inline-block;
  background: rgba(var(--primary-rgb), .10);
  border: 1px solid rgba(var(--primary-rgb), .30);
  color: var(--primary-light);
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  margin-bottom: .75rem;
}
.wd-cta { display:flex; gap:1rem; margin: 1.25rem 0 0; flex-wrap: wrap; }

/* Panel helper */
.panel { background: var(--panel); }

/* 1) Styles grid */
.style-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1100px){ .style-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .style-grid{ grid-template-columns: 1fr; } }

.style-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1.25rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.style-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.style-ico {
  width: 56px; height: 56px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--gradient); color:#fff; font-size: 1.25rem; margin-bottom: .6rem;
}
.style-card h3 { color: var(--white); margin-bottom: .25rem; font-size: 1.15rem; }
.style-card p { color: var(--text-gray); }
.style-points { list-style:none; margin-top: .6rem; display:grid; gap:.3rem; color: var(--text-light); }
.style-points li::before { content:"• "; color: var(--text-gray); }

/* 2) Tailored design row */
.wd-row { display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items: center; }
@media (max-width: 980px){ .wd-row{ grid-template-columns: 1fr; } }
.checklist { list-style:none; display:grid; gap:.45rem; margin: .75rem 0 0; color: var(--text-light); }
.checklist li::before { content:"✓ "; color: var(--primary-light); }
.ghost-card { background: var(--panel); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; min-height: 220px; display:flex; align-items:center; justify-content:center; }
.ghost-inner { opacity: .7; color: var(--text-gray); padding: 1rem; }

/* 4) Why it matters */
.why-grid {
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 1100px){ .why-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .why-grid{ grid-template-columns: 1fr; } }
.why-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px; padding: 1rem;
}
.why-card h3 { color: var(--white); margin-bottom: .25rem; }
.why-card p { color: var(--text-gray); }

/* 5) Benefits strip */
.benefits-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
}
@media (max-width: 900px){ .benefits-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .benefits-grid{ grid-template-columns: 1fr; } }
.benefit {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .7rem 1rem; color: var(--text-light); text-align: center;
}
.revamp-note { margin-top: 1rem; color: var(--text-gray); }
.revamp-note a { color: var(--text-light); text-decoration: underline; }

/* Final CTA */
.cta-final { text-align: center; }
.cta-final .btn-primary { margin-top: .5rem; }

/* Perf niceties */
.wd-hero, #styles, #tailored, #process, #why, #benefits, #cta {
  content-visibility: auto; contain-intrinsic-size: 900px;
}

/* ===== Unique Hero (split + subtle gradient blob) ===== */
.wd-hero {
  position: relative;
  overflow: clip;
  padding: calc(6rem + var(--navH)) 0 2.5rem;
}
.wd-hero::before{
  content:"";
  position:absolute; inset: -20% -10% auto auto;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(var(--primary-rgb), .18), transparent 60%);
  filter: blur(8px);
  transform: translate(10%, -15%);
  pointer-events: none;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items:center;
}
@media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero-col .subhead{ color: var(--text-gray); max-width: 820px; }
.hero-highlights{ list-style:none; display:grid; gap:.4rem; margin: .9rem 0 0; color: var(--text-light); }
.tool-chips{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-top: 1rem;
}
.tool-chips li{
  font-size: .85rem; color: var(--text-light);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px; padding: .4rem .7rem;
}

/* Hero showcase card */
/*.showcase-card{*/
/*  background: var(--panel);*/
/*  border: 1px solid rgba(255,255,255,.08);*/
/*  border-radius: 18px;*/
/*  padding: 1rem;*/
/*  box-shadow: 0 12px 32px rgba(0,0,0,.18);*/
/*}*/
/*.showcase-header{*/
/*  color: var(--text-light); opacity: .9; margin-bottom: .5rem; font-weight: 600;*/
/*}*/
/*.showcase-body{*/
/*  display:flex; flex-wrap:wrap; gap:.5rem;*/
/*}*/
/*.showcase-pill{*/
/*  background: rgba(var(--primary-rgb), .12);*/
/*  border: 1px solid rgba(var(--primary-rgb), .25);*/
/*  color: var(--text-light);*/
/*  border-radius: 999px; padding: .45rem .75rem; font-size: .9rem;*/
/*}*/

/* ===== Horizontal Step Cards ===== */
.steps-wrap{
  position: relative;
}
.steps-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .25rem;              /* space for hidden scrollbar */
  scroll-snap-type: x mandatory;
}
.steps-scroller::-webkit-scrollbar{ height: 8px; }
.steps-scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.hstep{
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 160px;
  display: grid; grid-template-columns: auto 1fr; gap:.8rem; align-items:start;
}
.hstep:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.hstep .num{
  width: 36px; height: 36px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(var(--primary-rgb), .12);
  border: 1px solid rgba(var(--primary-rgb), .25);
  color: var(--text-light); font-weight: 700;
}
.hstep h3{ color: var(--white); margin: 0; }
.hstep p{ color: var(--text-gray); margin: 0; grid-column: 1 / -1; }

/* Desktop: lay them out as a true row with equal columns, no overflow */
@media (min-width: 1100px){
  .steps-scroller{
    overflow: visible;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(5, 1fr);
    scroll-snap-type: none;
  }
}

/* Perf niceties */
#process { content-visibility: auto; contain-intrinsic-size: 700px; }

/* ----- HERO device mock images ----- */
.hero-mock{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}
.hero-mock .mock{
  display: block;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  background: #0b1020;
  object-fit: cover;
}
.mock.laptop{
  width: min(520px, 88%);
  aspect-ratio: 16/10;
  transform: rotate(-2deg) translateY(6px);
}
.mock.phone{
  position: absolute;
  right: 6%;
  bottom: -6%;
  width: 150px;
  max-width: 28%;
  aspect-ratio: 10/19;
  border-radius: 24px;
  transform: rotate(8deg);
}
@media (max-width: 980px){
  .mock.phone{ right: 3%; bottom: -4%; width: 130px; }
}

/* ----- STYLES scroller (image cards) ----- */
.styles .styles-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 26vw, 320px);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scroll-snap-type: x mandatory;
}
.styles-scroller::-webkit-scrollbar{ height: 8px; }
.styles-scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }

.style-card{
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.style-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.style-card img{
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display:block;
}
.style-card h3{
  color: var(--white);
  font-size: 1rem;
  padding: .8rem .9rem 1rem;
}

/* Desktop: show a neat grid instead of scroll */
@media (min-width: 1100px){
  .styles .styles-scroller{
    overflow: visible;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(5, 1fr);
    scroll-snap-type: none;
  }
}

/* ----- FEATURED SCREENS grid ----- */
.screen-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
@media (max-width: 1200px){ .screen-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px){ .screen-grid{ grid-template-columns: repeat(2, 1fr); } }

.screen{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.screen:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.screen img{
  display:block; width: 100%;
  aspect-ratio: 16/10; object-fit: cover;
}

/* Perf niceties */
.styles, .screens { content-visibility: auto; contain-intrinsic-size: 700px; }

/* ===== Pricing (Website Development) ===== */
.pricing-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 1100px){ .pricing-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .pricing-grid{ grid-template-columns: 1fr; } }

.plan-card{
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1.1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

.plan-card.featured{
  border-color: rgba(var(--primary-rgb), .35);
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
}

.ribbon{
  position:absolute; top: 14px; right: 14px;
  background: var(--gradient);
  color:#fff; font-size:.78rem; font-weight:600;
  padding:.35rem .55rem; border-radius: 999px;
}

.plan-header{ margin-bottom: .6rem; }
.plan-name{ color: var(--white); margin: 0 0 .15rem; font-size: 1.15rem; }
.plan-tagline{ color: var(--text-gray); margin: 0; }

.price-row{
  display:flex; align-items:center; gap:.6rem; margin-top: .6rem;
  color: var(--text-light);
}
.price-row .setup, .price-row .monthly{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px; padding: .4rem .7rem;
  display:inline-flex; align-items: baseline; gap:.25rem;
}
.price-row strong{ font-size: 1.05rem; color: var(--white); }

.plan-features{
  list-style:none; margin: .6rem 0 0; padding:0;
  display:grid; gap:.45rem; color: var(--text-light);
}
.plan-features li::before{ content:"✓ "; color: var(--primary-light); }

.plan-cta{ margin-top: .8rem; display:grid; gap:.35rem; }
.plan-cta .note{ color: var(--text-gray); font-size: .85rem; }

.pricing-footnote{
  margin-top: 1rem; color: var(--text-gray);
}
.pricing-footnote a{ color: var(--text-light); text-decoration: underline; }

/* Maintenance link under pricing cards */
.included-link{
  display:inline-block;
  font-size:.85rem;
  color: var(--primary-light);
  text-decoration: underline;
  margin-top:.25rem;
}
.included-link:hover{ color: var(--white); }