/* Author: Alberto Gonzalez */
/* File Name: styles.base.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 + metal texture combined */
    background-color: #050508;
    background-image:
      url("../../images/texture-metal.png"),
      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-size:
      cover,
      auto,
      auto,
      auto,
      auto;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat;
    background-attachment:
      fixed,
      fixed,
      fixed,
      fixed,
      fixed;
    background-position:
      center,
      center,
      center,
      center,
      center;
  }
  
  /* ===== 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;
    }
  }
  
  /* ===== 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);
    }
  }
  .glow-section.show::before {
    animation-play-state: running;
  }
  
  /* ===== Cards (Pricing & Services Grid) ===== */
  .cards {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;  /* Mobile-first: 1 card per row */
    gap: 1.5rem;
    max-width: 56rem;            /* avoids edge-to-edge stretching */
    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;
    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 reasonable width */
  #pricing .container {
    max-width: 70rem;
  }
  
  /* Let pricing buttons sit at bottom */
  .pricing-grid .card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .pricing-grid .card > .mt-5 {
    margin-top: auto;
  }
  
  /* ===== 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;
  }
  .plan-dropdown summary::-webkit-details-marker {
    display: none;
  }
  .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;
  }