/* ==========================================================================
   CUSTOM DEVELOPMENT PAGE — Technical, Premium Styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE-SPECIFIC VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --code-bg: rgba(0, 0, 0, 0.3);
  --tech-accent: rgba(220, 20, 60, 0.1);
  --tech-border: rgba(220, 20, 60, 0.15);
}

/* --------------------------------------------------------------------------
   BLUEPRINT BACKGROUND — Subtle technical aesthetic
   -------------------------------------------------------------------------- */
body::before {
  background: 
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(220, 20, 60, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(212, 168, 85, 0.04) 0%, transparent 40%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 100%, 100%, 60px 60px, 60px 60px;
}

/* --------------------------------------------------------------------------
   LAYOUT ADJUSTMENTS
   -------------------------------------------------------------------------- */
main.dev-main {
  gap: var(--space-16);
}

@media (min-width: 1024px) {
  main.dev-main {
    gap: var(--space-24);
  }
}

/* --------------------------------------------------------------------------
   HERO — Wider, more technical
   -------------------------------------------------------------------------- */
.dev-main .hero {
  grid-template-columns: 1fr;
  max-width: 800px;
}

.dev-main .hero-copy h1 {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
}

.dev-main .hero-copy .lead {
  max-width: 680px;
  font-size: var(--text-xl);
}

/* --------------------------------------------------------------------------
   GRIDS — Wider cards for technical content
   -------------------------------------------------------------------------- */
.service-grid.dev-grid,
.problem-grid.dev-grid,
.proof-grid.dev-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .service-grid.dev-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .proof-grid.dev-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   CARDS — Technical styling
   -------------------------------------------------------------------------- */
.dev-main .service-card,
.dev-main .problem-card,
.dev-main .proof-card {
  background: var(--charcoal-2);
  border: 1px solid var(--border);
}

.dev-main .service-card:hover,
.dev-main .problem-card:hover {
  border-color: var(--crimson);
}

/* Problem cards with headers */
.dev-main .problem-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  color: var(--soft-gold);
}

.dev-main .problem-card p {
  font-size: var(--text-base);
  color: var(--slate-light);
  margin: 0;
}

/* --------------------------------------------------------------------------
   CASE TAGS — Monospace, technical
   -------------------------------------------------------------------------- */
.dev-main .case-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--tech-accent);
  border: 1px solid var(--tech-border);
}

/* --------------------------------------------------------------------------
   FOCUS ICONS — Technical accent
   -------------------------------------------------------------------------- */
.dev-main .focus-icon {
  background: var(--tech-accent);
  border-color: var(--tech-border);
}

/* --------------------------------------------------------------------------
   PRICING GRID
   -------------------------------------------------------------------------- */
.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pricing-grid .service-card {
  text-align: center;
}

.pricing-grid .service-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   FAQ — Clean, minimal
   -------------------------------------------------------------------------- */
.faq-grid {
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

.faq-grid .service-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-6) 0;
}

.faq-grid .service-card:first-child {
  border-top: 1px solid var(--border);
}

.faq-grid .service-card:hover {
  transform: none;
  box-shadow: none;
  border-bottom-color: var(--crimson);
}

.faq-grid .service-card::before,
.faq-grid .service-card::after {
  display: none;
}

.faq-grid .service-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.faq-grid .service-card p {
  font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   PHILOSOPHY SECTION — Wide content
   -------------------------------------------------------------------------- */
.dev-main .independent-body {
  max-width: 800px;
}

.dev-main .independent-body ul {
  margin: var(--space-6) 0;
  padding-left: var(--space-6);
}

.dev-main .independent-body li {
  margin-bottom: var(--space-4);
  color: var(--slate-light);
  line-height: 1.6;
}

.dev-main .independent-body li strong {
  color: var(--warm-white);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   MOBILE OPTIMIZATIONS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .dev-main .hero-copy h1 {
    font-size: var(--text-3xl);
  }
  
  .dev-main .hero-copy .lead {
    font-size: var(--text-lg);
  }
  
  .service-grid.dev-grid,
  .problem-grid.dev-grid,
  .proof-grid.dev-grid {
    grid-template-columns: 1fr;
  }
  
  .faq-grid .service-card {
    padding: var(--space-5) 0;
  }
}