/* SolarBallet.com — site.css
   Elegant solar theater for ABC Solar Incorporated
*/

:root{
  --ink:#130d08;
  --ink-soft:#3a2a1e;
  --stage:#0b0705;
  --stage-2:#17100b;
  --gold:#f5c66a;
  --gold-deep:#b87922;
  --cream:#fff7e8;
  --paper:#fffaf0;
  --rose:#d28b78;
  --copper:#a95d2a;
  --mist:#f4e4c7;
  --line:rgba(19,13,8,.14);
  --shadow:0 24px 80px rgba(18,10,4,.24);
  --radius:28px;
  --radius-sm:16px;
  --max:1180px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(245,198,106,.28), transparent 34rem),
    radial-gradient(circle at 90% 8%, rgba(210,139,120,.20), transparent 30rem),
    linear-gradient(180deg, #fff7e8 0%, #fffaf0 44%, #f6ead3 100%);
  line-height:1.55;
}

body.nav-open{
  overflow:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

p{
  margin:0 0 1rem;
}

strong{
  font-weight:850;
}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  z-index:999;
  background:var(--gold);
  color:#140b04;
  padding:.75rem 1rem;
  border-radius:999px;
  font-weight:900;
}

.skip-link:focus{
  left:12px;
}

/* Header */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,7,5,.86);
  backdrop-filter:blur(18px);
  color:var(--cream);
  border-bottom:1px solid rgba(245,198,106,.18);
}

.header-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  letter-spacing:.02em;
}

.brand-mark{
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(1.45rem, 2.2vw, 2.35rem);
  font-weight:900;
  line-height:1;
}

.brand-mark span{
  color:var(--gold);
}

.brand-line{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:rgba(255,247,232,.72);
  font-weight:800;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:.25rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.main-nav a{
  padding:.65rem .85rem;
  border-radius:999px;
  color:rgba(255,247,232,.86);
  font-size:.92rem;
  font-weight:750;
}

.main-nav a:hover,
.main-nav a:focus-visible{
  background:rgba(245,198,106,.16);
  color:#fff;
  outline:none;
}

.nav-cta{
  background:linear-gradient(135deg, var(--gold), #fff1b8);
  color:#150b03 !important;
  box-shadow:0 10px 30px rgba(245,198,106,.22);
}

.nav-toggle{
  display:none;
  border:1px solid rgba(255,247,232,.25);
  background:rgba(255,255,255,.05);
  color:var(--cream);
  border-radius:999px;
  padding:.7rem .9rem;
  font-weight:900;
}

/* Hero */

.hero{
  position:relative;
  min-height:760px;
  display:grid;
  align-items:center;
  color:var(--cream);
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(11,7,5,.94) 0%, rgba(11,7,5,.78) 42%, rgba(11,7,5,.38) 72%, rgba(11,7,5,.70) 100%),
    radial-gradient(circle at 74% 24%, rgba(245,198,106,.38), transparent 20rem),
    linear-gradient(135deg, #100905 0%, #2a1609 46%, #070403 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(245,198,106,.14) 42% 43%, transparent 43% 100%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.06) 0 1px, transparent 1px 96px);
  opacity:.55;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  right:-8vw;
  bottom:-12vw;
  width:min(56vw,720px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(245,198,106,.46), rgba(245,198,106,.12) 38%, transparent 67%);
  filter:blur(2px);
  opacity:.82;
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  padding:7rem 0;
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(280px, .68fr);
  gap:3rem;
  align-items:center;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  width:max-content;
  max-width:100%;
  padding:.45rem .78rem;
  border:1px solid rgba(245,198,106,.36);
  border-radius:999px;
  color:#ffe6a4;
  background:rgba(245,198,106,.08);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
}

.kicker::before{
  content:"";
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 22px rgba(245,198,106,.85);
}

.hero h1{
  margin:1.15rem 0 1rem;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(4rem, 9vw, 8.4rem);
  line-height:.86;
  letter-spacing:-.075em;
  max-width:900px;
}

.hero h1 em{
  color:var(--gold);
  font-style:italic;
  text-shadow:0 0 34px rgba(245,198,106,.22);
}

.hero-lede{
  max-width:740px;
  font-size:clamp(1.14rem, 1.8vw, 1.48rem);
  color:rgba(255,247,232,.86);
}

.hero-actions,
.section-actions{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.85rem 1.15rem;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(19,13,8,.18);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover,
.button:focus-visible{
  transform:translateY(-2px);
  outline:none;
}

.button-primary{
  background:linear-gradient(135deg, var(--gold), #fff0b1);
  color:#160b03;
  box-shadow:0 18px 42px rgba(245,198,106,.28);
}

.button-secondary{
  background:rgba(255,247,232,.10);
  color:var(--cream);
  border-color:rgba(255,247,232,.28);
}

.button-dark{
  background:var(--stage);
  color:var(--cream);
  border-color:rgba(245,198,106,.24);
}

.button-light{
  background:#fff;
  color:var(--ink);
}

.hero-card{
  justify-self:end;
  width:min(100%, 390px);
  border:1px solid rgba(245,198,106,.26);
  border-radius:var(--radius);
  padding:1.2rem;
  background:
    linear-gradient(180deg, rgba(255,247,232,.14), rgba(255,247,232,.05)),
    rgba(11,7,5,.62);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.hero-card-top{
  min-height:300px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,231,164,.9), rgba(245,198,106,.22) 22%, transparent 44%),
    linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    repeating-linear-gradient(100deg, rgba(255,255,255,.08) 0 2px, transparent 2px 32px),
    #130c08;
  position:relative;
  overflow:hidden;
}

.hero-card-top::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:150px;
  height:230px;
  transform:translate(-50%,-38%) rotate(-12deg);
  border-radius:50% 50% 44% 44%;
  border:2px solid rgba(255,247,232,.42);
  box-shadow:
    0 0 0 24px rgba(245,198,106,.05),
    0 40px 90px rgba(0,0,0,.35);
}

.hero-card-top::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:16%;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(245,198,106,.9), transparent);
  box-shadow:0 0 42px rgba(245,198,106,.55);
}

.hero-card h2{
  margin:1rem 0 .35rem;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.85rem;
}

.hero-card p{
  color:rgba(255,247,232,.76);
  margin-bottom:0;
}

/* Sections */

.section{
  padding:5.75rem 0;
}

.section-tight{
  padding:3.5rem 0;
}

.section-dark{
  background:
    radial-gradient(circle at 20% 0%, rgba(245,198,106,.20), transparent 30rem),
    linear-gradient(135deg, #0b0705, #21140b 70%, #0c0704);
  color:var(--cream);
}

.section-dark .eyebrow,
.section-dark .section-lede{
  color:rgba(255,247,232,.78);
}

.section-head{
  max-width:850px;
  margin-bottom:2.2rem;
}

.section-head.center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.eyebrow{
  margin:0 0 .65rem;
  color:var(--copper);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:950;
}

h2,
.h2{
  margin:0 0 1rem;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(2.25rem, 5vw, 4.75rem);
  line-height:.95;
  letter-spacing:-.045em;
}

h3{
  margin:0 0 .65rem;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(1.35rem, 2.4vw, 2rem);
  line-height:1.08;
}

.section-lede{
  margin:0;
  max-width:760px;
  font-size:clamp(1.05rem, 1.5vw, 1.28rem);
  color:rgba(19,13,8,.72);
}

.center .section-lede{
  margin-left:auto;
  margin-right:auto;
}

/* Cards */

.grid{
  display:grid;
  gap:1.25rem;
}

.grid-2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.grid-3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.grid-4{
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.55rem;
  background:rgba(255,255,255,.58);
  box-shadow:0 16px 50px rgba(60,36,12,.08);
}

.card.dark{
  background:rgba(255,247,232,.06);
  border-color:rgba(245,198,106,.18);
  color:var(--cream);
}

.card.dark p{
  color:rgba(255,247,232,.74);
}

.card p:last-child{
  margin-bottom:0;
}

.card-icon{
  width:50px;
  height:50px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  background:linear-gradient(135deg, rgba(245,198,106,.42), rgba(255,255,255,.54));
  color:#6a380c;
  font-weight:950;
  box-shadow:inset 0 0 0 1px rgba(184,121,34,.16);
}

.card.dark .card-icon{
  background:linear-gradient(135deg, rgba(245,198,106,.34), rgba(255,247,232,.08));
  color:#ffe6a4;
}

.feature-card{
  position:relative;
  min-height:440px;
  overflow:hidden;
  border-radius:var(--radius);
  padding:1.5rem;
  display:flex;
  align-items:flex-end;
  color:var(--cream);
  background:
    linear-gradient(180deg, rgba(11,7,5,.10), rgba(11,7,5,.92)),
    radial-gradient(circle at 68% 20%, rgba(245,198,106,.30), transparent 22rem),
    linear-gradient(135deg, #261508, #070403);
  box-shadow:var(--shadow);
}

.feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(108deg, rgba(255,255,255,.075) 0 1px, transparent 1px 58px);
  opacity:.8;
}

.feature-content{
  position:relative;
  z-index:1;
  max-width:560px;
}

.feature-content p{
  color:rgba(255,247,232,.78);
}

/* Split blocks */

.split{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:2rem;
  align-items:center;
}

.split.reverse{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
}

.panel{
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:2rem;
  background:rgba(255,255,255,.58);
  box-shadow:0 20px 70px rgba(74,44,14,.10);
}

.stage-panel{
  border-radius:var(--radius);
  padding:2rem;
  background:
    radial-gradient(circle at 78% 18%, rgba(245,198,106,.28), transparent 22rem),
    linear-gradient(135deg, #110905, #2b170c 70%, #070403);
  color:var(--cream);
  box-shadow:var(--shadow);
  border:1px solid rgba(245,198,106,.19);
}

.stage-panel p{
  color:rgba(255,247,232,.76);
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.85rem;
  margin-top:1.35rem;
}

.stat{
  border-radius:20px;
  padding:1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(245,198,106,.16);
}

.stat b{
  display:block;
  font-size:1.7rem;
  color:var(--gold);
  line-height:1;
}

.stat span{
  display:block;
  margin-top:.35rem;
  color:rgba(255,247,232,.70);
  font-size:.86rem;
}

/* Lists */

.check-list{
  list-style:none;
  padding:0;
  margin:1.25rem 0 0;
  display:grid;
  gap:.85rem;
}

.check-list li{
  position:relative;
  padding-left:2rem;
}

.check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.05rem;
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(245,198,106,.32);
  color:#6f3b0e;
  font-size:.8rem;
  font-weight:950;
}

.section-dark .check-list li::before,
.stage-panel .check-list li::before{
  background:rgba(245,198,106,.25);
  color:var(--gold);
}

/* Page hero */

.page-hero{
  padding:5.25rem 0 4.25rem;
  color:var(--cream);
  background:
    linear-gradient(90deg, rgba(11,7,5,.95), rgba(11,7,5,.74)),
    radial-gradient(circle at 78% 10%, rgba(245,198,106,.36), transparent 28rem),
    linear-gradient(135deg, #100905, #2a1609 68%, #080403);
}

.page-hero h1{
  margin:1rem 0;
  max-width:920px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(3rem, 7vw, 6.6rem);
  line-height:.9;
  letter-spacing:-.06em;
}

.page-hero p{
  max-width:780px;
  color:rgba(255,247,232,.82);
  font-size:clamp(1.08rem, 1.6vw, 1.34rem);
}

/* CTA */

.cta{
  border-radius:calc(var(--radius) + 10px);
  padding:3rem;
  color:var(--cream);
  background:
    linear-gradient(90deg, rgba(11,7,5,.94), rgba(11,7,5,.68)),
    radial-gradient(circle at 88% 22%, rgba(245,198,106,.48), transparent 24rem),
    linear-gradient(135deg, #100905, #351b09);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}

.cta::after{
  content:"";
  position:absolute;
  right:-5rem;
  top:-5rem;
  width:18rem;
  height:18rem;
  border-radius:50%;
  border:1px solid rgba(245,198,106,.24);
  box-shadow:0 0 0 42px rgba(245,198,106,.05);
}

.cta-content{
  position:relative;
  z-index:1;
  max-width:820px;
}

.cta h2{
  color:var(--cream);
}

.cta p{
  color:rgba(255,247,232,.80);
  font-size:1.12rem;
}

/* Footer */

.site-footer{
  background:#090503;
  color:rgba(255,247,232,.78);
  padding:3.5rem 0 2rem;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:2rem;
  align-items:start;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,247,232,.12);
}

.footer-brand{
  color:#fff;
}

.footer-brand h2{
  font-size:2.25rem;
  margin-bottom:.65rem;
}

.footer-brand p{
  max-width:520px;
}

.footer-links{
  display:grid;
  gap:.45rem;
}

.footer-links a{
  color:rgba(255,247,232,.78);
}

.footer-links a:hover,
.footer-links a:focus-visible{
  color:var(--gold);
  outline:none;
}

.footer-title{
  color:#fff;
  font-weight:950;
  margin-bottom:.7rem;
}

.abc-footer{
  margin-top:2rem;
  display:flex;
  gap:1.4rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.abc-footer p{
  margin:0;
}

.abc-logo{
  width:180px;
  height:auto;
  background:#fff;
  border-radius:14px;
  padding:.45rem;
}

.copyright{
  margin-top:1.5rem;
  color:rgba(255,247,232,.52);
  font-size:.9rem;
}

/* Utility */

.gold{
  color:var(--gold);
}

.muted{
  color:rgba(19,13,8,.64);
}

.section-dark .muted{
  color:rgba(255,247,232,.64);
}

.text-center{
  text-align:center;
}

.narrow{
  max-width:760px;
}

.wide{
  max-width:980px;
}

.rounded{
  border-radius:var(--radius);
}

.shadow{
  box-shadow:var(--shadow);
}

/* FAQ */

.faq-list{
  display:grid;
  gap:1rem;
}

.faq-item{
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.62);
  padding:1.25rem 1.35rem;
}

.faq-item h3{
  font-size:1.25rem;
}

/* Tables */

.table-wrap{
  overflow:auto;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.66);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}

th,
td{
  padding:1rem;
  text-align:left;
  border-bottom:1px solid rgba(19,13,8,.10);
}

th{
  background:rgba(245,198,106,.20);
  font-weight:950;
}

tr:last-child td{
  border-bottom:0;
}

/* Forms */

.form{
  display:grid;
  gap:1rem;
}

.form label{
  display:grid;
  gap:.35rem;
  font-weight:850;
}

.form input,
.form textarea,
.form select{
  width:100%;
  border:1px solid rgba(19,13,8,.18);
  border-radius:16px;
  padding:.9rem 1rem;
  font:inherit;
  color:var(--ink);
  background:#fffdf7;
}

.form textarea{
  min-height:150px;
  resize:vertical;
}

.form input:focus,
.form textarea:focus,
.form select:focus{
  outline:3px solid rgba(245,198,106,.36);
  border-color:var(--gold-deep);
}

/* Responsive */

@media (max-width: 940px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .main-nav{
    position:fixed;
    inset:78px 16px auto 16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:1rem;
    background:rgba(11,7,5,.97);
    border:1px solid rgba(245,198,106,.22);
    border-radius:24px;
    box-shadow:var(--shadow);
  }

  body.nav-open .main-nav{
    display:flex;
  }

  .main-nav a{
    padding:.9rem 1rem;
  }

  .hero{
    min-height:auto;
  }

  .hero-inner{
    grid-template-columns:1fr;
    padding:5.5rem 0;
  }

  .hero-card{
    justify-self:start;
  }

  .split,
  .split.reverse,
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .container{
    width:min(100% - 28px, var(--max));
  }

  .header-inner{
    min-height:70px;
  }

  .brand-line{
    font-size:.68rem;
    letter-spacing:.15em;
  }

  .main-nav{
    inset:70px 12px auto 12px;
  }

  .hero-inner{
    padding:4rem 0;
  }

  .hero h1{
    font-size:clamp(3.2rem, 18vw, 5.1rem);
  }

  .section{
    padding:4rem 0;
  }

  .section-tight{
    padding:2.75rem 0;
  }

  .page-hero{
    padding:4rem 0 3rem;
  }

  .card,
  .panel,
  .stage-panel{
    padding:1.25rem;
  }

  .cta{
    padding:1.6rem;
  }

  .stat-row{
    grid-template-columns:1fr;
  }

  .hero-actions,
  .section-actions{
    flex-direction:column;
  }

  .button{
    width:100%;
  }

  .abc-footer{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}