/* Author: Alberto Gonzalez */
/* File Name: styles.css */
/* Date Created: October 29, 2025 */
/* Date Last Edited: November 20, 2025 */

/* ===== Brand Palette ===== */
:root {
  --ink: #111827;        /* deep slate */
  --coal: #0a0a0a;       /* near-black */
  --white: #ffffff;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --forge-400: #fb923c;
  --forge-500: #f97316;
  --forge-600: #ea580c;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
}

/* ===== Global Background: gradient + metal ===== */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--white);
  min-height: 100vh;
  position: relative;

  /* Warm forge gradient */
  background-color: #050508;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(249,115,22,0.22), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(251,146,60,0.16), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(15,23,42,0.9), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(15,23,42,1), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Metal texture overlay (dark, subtle) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image: url("../../images/texture-metal.png"); /* relative to index.html */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.18;                /* tweak 0.12–0.25 for more/less texture */
  mix-blend-mode: overlay;
}

/* ===== Layout ===== */
.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
  background: rgba(17,24,39,.9);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.brand { display: flex; align-items: center; gap: .5rem; }
.nav { display: flex; align-items: center; gap: 1rem; }
.nav a { color: var(--gray-200); transition: color .25s; }
.nav a:hover { color: var(--forge-500); }
.menu-btn {
  display: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .75rem;
  padding: .4rem .6rem;
}
.mobile-menu {
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(17,24,39,.95);
}
.mobile-menu a {
  display: block;
  padding: .75rem 1rem;
  color: var(--gray-200);
}
@media (max-width:768px){
  .nav a{display:none;}
  .btn-primary{display:none;}
  .menu-btn{display:inline-flex;}
}

/* ===== Buttons ===== */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1rem;
  border-radius:.75rem;
  font-weight:600;
  background: var(--forge-500);
  color:#fff;
  box-shadow: 0 10px 25px -5px rgba(249,115,22,.25),
              0 8px 10px -6px rgba(249,115,22,.20);
  transition: background .25s, transform .2s;
}
.btn-primary:hover{
  background: var(--forge-600);
  transform: translateY(-2px);
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem 1rem;
  border-radius:.75rem;
  border:1px solid rgba(255,255,255,.25);
  color:var(--gray-200);
  transition: all .25s;
}
.btn-outline:hover{
  background: rgba(249,115,22,.15);
  border-color: var(--forge-500);
}

/* ===== Logo ===== */
.brand-logo{
  height:36px;
  width:auto;
  display:inline-block;
  margin-right:.5rem;
  border-radius:.25rem;
  transition: filter .3s;
}
.brand-logo:hover{
  filter: drop-shadow(0 0 8px rgba(249,115,22,.6));
}
@media (max-width:640px){
  .brand-logo{ height:30px; }
}

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:4rem 0 5rem;
}
.hero-glow::before,
.hero-glow::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(64px);
  opacity:.15;
  background: var(--forge-500);
}
.hero-glow::before{
  top:-10rem;
  right:-10rem;
  width:24rem;
  height:24rem;
}
.hero-glow::after{
  bottom:-10rem;
  left:-10rem;
  width:24rem;
  height:24rem;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding:.25rem .5rem;
  border-radius:999px;
  color:var(--gray-200);
  font-size:.75rem;
}
.badge .dot{
  width:.5rem;
  height:.5rem;
  border-radius:999px;
  background: var(--forge-500);
}
.title{
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight:800;
  line-height:1.05;
}
.lead{
  margin-top:1rem;
  color:var(--gray-200);
  max-width:36rem;
}
.actions{
  margin-top:1rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

/* Slow glow animation (hero logo background) */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 0.75; transform: scale(1.05); }
}
.animate-pulse-slow {
  animation: pulse-slow 6s ease-in-out infinite;
}

/* Keep hero surface from clipping anything */
.hero-forge-texture {
  position: relative;
  overflow: hidden;
}

/* ===== Sections ===== */
.section{
  padding:4rem 0;
  scroll-margin-top:80px;
}
.section.alt{
  background: transparent; /* let global bg show */
  border-top:1px solid rgba(255,255,255,.06);
}
.section-title{
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight:700;
  color: var(--forge-500);
}
.section-sub{
  margin-top:.5rem;
  color:var(--gray-200);
  max-width:42rem;
}
@media (max-width:640px){
  .section{
    padding:3rem 0;
  }
}

/* ===== Forge particles: pixel embers + soft smoke ===== */

.forge-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;              /* above texture (body::before) but behind content */
  overflow: hidden;
}

/* Base for all particles */
.ember-particle,
.smoke-particle {
  position: absolute;
  will-change: transform, opacity;
}

/* Tiny pixel embers */
.ember-particle {
  width: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--forge-500);
  box-shadow:
    0 0 6px rgba(249,115,22,0.9),
    0 0 14px rgba(249,115,22,0.55);
  opacity: 0;
  animation-name: emberFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Soft smoke blobs */
.smoke-particle {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: radial-gradient(circle,
              rgba(148,163,184,0.25) 0,
              rgba(15,23,42,0) 65%);
  filter: blur(6px);
  opacity: 0;
  animation-name: smokeDrift;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* Embers: rise & drift a bit */
@keyframes emberFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    transform: translate3d(
      var(--drift-x, 0px),
      var(--rise-mid, -40vh),
      0
    ) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate3d(
      var(--drift-x, 0px),
      var(--rise-y, -80vh),
      0
    ) scale(0.7);
    opacity: 0;
  }
}

/* Smoke: slow, subtle upward drift */
@keyframes smokeDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.25;
  }
  70% {
    transform: translate3d(
      var(--smoke-drift-x, 10px),
      var(--smoke-rise-mid, -25vh),
      0
    ) scale(1.1);
    opacity: 0.22;
  }
  100% {
    transform: translate3d(
      var(--smoke-drift-x, 20px),
      var(--smoke-rise-y, -45vh),
      0
    ) scale(1.2);
    opacity: 0;
  }
}

/* ===== Section background glow pulses ===== */
.glow-section {
  position: relative;
  z-index: 0;
}
.glow-section::before {
  content: "";
  position: absolute;
  inset: -40px 10%;
  border-radius: 999px;
  background: radial-gradient(circle at top,
              rgba(249,115,22,0.45),
              transparent 60%);
  filter: blur(48px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateY(10px);
  animation: sectionGlow 14s ease-in-out infinite;
  animation-play-state: paused; /* resume when .show added */
}
@keyframes sectionGlow {
  0%, 35%, 100% {
    opacity: 0;
    transform: translateY(10px);
  }
  50% {
    opacity: 0.6;
    transform: translateY(0);
  }
}
/* When reveal animation is complete, start the glow pulse */
.glow-section.show::before {
  animation-play-state: running;
}

/* ===== Cards (Pricing Grid) ===== */
.cards {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;        /* Mobile-first: 1 card per row */
  gap: 1.5rem;
  max-width: 56rem;                  /* Prevents ugly full-width stretch */
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2×2 grid on tablet+ */
  }
}
.cards .card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1rem;
  background: rgba(15,23,42,.85);
  padding: 1.5rem;
  position: relative;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;     /* lets content stretch & button sit bottom */
  height: 100%;
}
.cards .card.featured {
  border-color: var(--forge-500);
  box-shadow:
    0 0 0 1px rgba(249,115,22,.35),
    0 25px 45px -18px rgba(0,0,0,.8);
}
.cards .card h3 {
  font-weight: 600;
  color: var(--forge-500);
}
.cards .card p {
  margin: .5rem 0;
  color: var(--gray-200);
  font-size: .95rem;
}
.cards .card ul {
  margin-top: .5rem;
  padding-left: 1.1rem;
  color: var(--gray-200);
  font-size: .9rem;
  list-style: disc;
}
.price {
  margin: .25rem 0 0;
  font-size: 2rem;
  font-weight: 800;
  color: var(--forge-500);
}
.chip {
  display: inline-block;
  background: var(--forge-500);
  color: #fff;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.muted {
  color: var(--gray-300);
}
.note {
  margin-top: 1.5rem;
  color: var(--gray-300);
  font-size: .8rem;
}

/* Keep pricing section a bit narrower so it doesn't feel stretched on wide screens */
#pricing .container {
  max-width: 70rem;
}

/* Let cards stretch to the same height in each row */
.pricing-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make buttons sit at the bottom nicely on tall cards */
.pricing-grid .card > .mt-5 {
  margin-top: auto;
}

/* Maintenance card: sits in the grid but doesn't feel like a super-wide bar */
.maintenance-card {
  grid-column: 1 / -1;       /* full row in the grid */
  max-width: 38rem;          /* keeps it from stretching too wide */
  margin-inline: auto;
  margin-top: 1.5rem;
}
/* On small screens just let it behave like a normal full-width card */
@media (max-width: 640px) {
  .maintenance-card {
    max-width: 100%;
  }
}

/* ===== Portfolio thumbs ===== */
.thumb{
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  background: linear-gradient(135deg,#1f2937,#0b0f1a);
  color:#cbd5e1;
  font-size:.9rem;
}

/* ===== Forms ===== */
.form{
  margin:1.25rem auto 0;
  max-width:42rem;
  display:grid;
  gap:1rem;
}
.form label{
  font-size:.9rem;
  color:var(--gray-200);
}
.form input,
.form textarea{
  width:100%;
  border-radius:.75rem;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(15,23,42,.85);
  padding:.6rem .9rem;
  color:var(--white);
}
.form input:focus,
.form textarea:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(249,115,22,.4);
}
.form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.hint{
  font-size:.8rem;
  color:var(--gray-300);
}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(15,23,42,.88);
}
.site-footer .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-nav{
  display:flex;
  gap:1rem;
}
.footer-nav a{
  color:var(--gray-200);
  transition: color .25s;
}
.footer-nav a:hover{
  color:var(--forge-500);
}

/* ===== Softer bands between sections (just a separator line) ===== */
.band-ink,
.band-coal{
  background: transparent;
}
.section.band-ink,
.section.band-coal{
  position:relative;
}
.section.band-ink::before,
.section.band-coal::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, transparent,
              rgba(255,255,255,.10),
              transparent);
  opacity:.4;
}

/* ===== Reveal-on-scroll ===== */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity:1;
  transform:none;
}
.reveal [data-reveal]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.show [data-reveal]{ opacity:1; transform:none; }
.reveal.show [data-reveal]:nth-child(1){ transition-delay:.05s }
.reveal.show [data-reveal]:nth-child(2){ transition-delay:.12s }
.reveal.show [data-reveal]:nth-child(3){ transition-delay:.18s }
.reveal.show [data-reveal]:nth-child(4){ transition-delay:.24s }

/* Active nav color */
.nav a.active{ color: var(--forge-500); }

/* ===== Pricing dropdowns ===== */
.plan-dropdown {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.5);
}
.plan-dropdown summary {
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Remove default marker */
.plan-dropdown summary::-webkit-details-marker {
  display: none;
}
/* Custom arrow */
.plan-dropdown summary::after {
  content: "▾";
  font-size: 0.75rem;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
  opacity: 0.85;
}
.plan-dropdown[open] summary::after {
  transform: rotate(180deg);
}
.plan-dropdown ul {
  margin-top: 0.5rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--gray-300);
  list-style: disc;
}