/* ===== Theme tokens (orange + brown + gray stone) ===== */
:root{
  --orange-1:#FF7300; /* bright ember */
  --orange-2:#FE5800; /* deep ember */
  --brown-1:#3b2f2f;  /* dark bark */
  --brown-2:#4a3b30;  /* warm soil */
  --gray-1:#939393;   /* light stone */
  --gray-2:#808080;   /* mid stone */
  --gray-3:#676767;   /* deep stone */
  --coal:#1f1f1f;     /* charcoal */
  --bg:#111111;       /* page background behind sections */
  --paper:#111315;    /* subtle off-black */
  --ring: rgba(255,115,0,.35);

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --shadow-1: 0 10px 25px rgba(0,0,0,.25);
  --shadow-2: 0 6px 14px rgba(0,0,0,.18);

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Merriweather", Georgia, serif;

  --container: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:#e9e9e9;
  background: var(--bg);
  line-height:1.6;
}

/* ===== Layout helpers ===== */
.container{max-width:var(--container);margin-inline:auto;padding:0 24px}
.row{display:flex;gap:12px}
.row.between{justify-content:space-between}
.row.center{align-items:center}
.row.top{align-items:flex-start}
.row.wrap{flex-wrap:wrap}
.gap{gap:14px}

.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(1,1fr)}
.grid--3{grid-template-columns:repeat(1,1fr)}
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(17,17,17,.9), rgba(17,17,17,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:#fff;font-weight:800;font-size:1.1rem}
.brand-mark{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.brand-text{letter-spacing:.5px}
.nav a{
  color:#ddd;text-decoration:none;margin-left:16px;font-weight:600;
}
.nav a:hover{color:#fff}

/* ===== Buttons & Inputs ===== */
.btn{
  appearance:none;border:none;cursor:pointer;
  padding:.8rem 1.1rem;border-radius:var(--radius-lg);
  font-weight:800;text-decoration:none;display:inline-block;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: var(--shadow-2);
}
.btn:active{transform:translateY(1px)}
.btn--ember{
  background: linear-gradient(135deg,var(--orange-1),var(--orange-2));
  color:#1a120d;
}
.btn--ember:hover{filter:saturate(1.1) brightness(1.05)}
.btn--ghost{
  background:transparent;border:1px solid rgba(255,255,255,.16);color:#eee;
}
.btn--ghost:hover{border-color:#fff}
.btn--outline{
  background:transparent;border:1px solid var(--gray-2);color:#eee;
}
.btn--outline:hover{border-color:var(--orange-1);color:#fff}

.input{
  flex:1; min-width:220px; padding:.85rem 1rem;border-radius:var(--radius-lg);
  background:#111; border:1px solid rgba(255,255,255,.12); color:#fff;
  outline:none;
}
.input:focus{border-color:var(--ring); box-shadow:0 0 0 4px var(--ring)}

/* ===== Hero ===== */
.hero{
  position:relative; isolation:isolate;
  padding:120px 0 88px;
  background:
    radial-gradient(1000px 400px at 20% -20%, rgba(255,115,0,.25), transparent 60%),
    radial-gradient(900px 500px at 80% -30%, rgba(254,88,0,.18), transparent 60%),
    linear-gradient(180deg, #0e0e0e, #141414 50%, #101010);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero__inner{max-width:860px}
.hero__title{
  font-family:var(--font-serif);
  font-size:clamp(2.2rem, 3.6vw + 1rem, 4rem);
  line-height:1.1;margin:0 0 .5rem;
}
.hero__title .ember{color:var(--orange-1)}
.hero__subtitle{color:#d2d2d2; max-width:48ch; margin:.25rem 0 1.2rem}
.hero__badge{
  display:inline-block;margin-top:16px;
  background:rgba(255,255,255,.06);
  padding:.45rem .7rem;border-radius:999px;color:#cfcfcf;font-size:.9rem
}

/* Decorative embers */
.embers{position:absolute;inset:auto 0 -20px 0;height:60px;pointer-events:none}
.embers--left{left:0;right:auto;width:30%;background:
  radial-gradient(12px 12px at 20% 35%, rgba(255,115,0,.35), transparent 60%),
  radial-gradient(10px 10px at 40% 60%, rgba(254,88,0,.25), transparent 60%),
  radial-gradient(8px 8px at 70% 20%, rgba(255,115,0,.25), transparent 60%);
  filter: blur(1px);
}
.embers--right{right:0;left:auto;width:30%;background:
  radial-gradient(12px 12px at 80% 35%, rgba(255,115,0,.35), transparent 60%),
  radial-gradient(10px 10px at 55% 65%, rgba(254,88,0,.25), transparent 60%),
  radial-gradient(8px 8px at 30% 15%, rgba(255,115,0,.25), transparent 60%);
  filter: blur(1px);
}

/* ===== Sections ===== */
.section{padding:64px 0}
.section--raised{
  background: linear-gradient(180deg, #121212, #151515);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section--coal{
  background: #141414;
  border-top:1px solid rgba(255,255,255,.06);
}
.section__head{margin-bottom:14px}
.section__title{
  margin:0 0 12px;
  font-family:var(--font-serif);
  font-size:clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
}
.lead{color:#d5d5d5;max-width:60ch}

/* ===== Cards & Product tiles ===== */
.card{
  background:#131313;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow-1)
}
.card__icon{font-size:1.6rem}
.card__title{margin:.4rem 0 .25rem}
.card__body{color:#cfcfcf}

.product{
  background:#121212;border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl); padding:14px; text-align:center; box-shadow:var(--shadow-1)
}
.product__media{
  height:180px;border-radius:var(--radius-lg); margin-bottom:12px;
  border:1px solid rgba(255,255,255,.06);
}
/* stone/ember/char textures using pure CSS so no images needed */
.texture-stone{
  background:
    radial-gradient(120px 80px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,.03) 2px 4px),
    linear-gradient(180deg, var(--gray-3), var(--gray-2));
}
.texture-ember{
  background:
    radial-gradient(160px 120px at 70% 20%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, var(--orange-2), var(--orange-1));
}
.texture-char{
  background:
    radial-gradient(120px 60px at 30% 10%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg, #2a2a2a, #141414);
}
.product__name{margin:.25rem 0;color:#f3f3f3;font-weight:700}
.product__price{margin:0 0 .6rem;color:#c8c8c8}

/* ===== Story block ===== */
.story-block{
  min-height:280px;border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(300px 200px at 70% 10%, rgba(255,115,0,.08), transparent 60%),
    linear-gradient(180deg, #1a1a1a, #121212);
  box-shadow: var(--shadow-1);
  position:relative; overflow:hidden;
}
.texture-slab{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 6px, rgba(255,255,255,.03) 6px 12px),
    radial-gradient(400px 180px at 30% -10%, rgba(254,88,0,.12), transparent 60%),
    linear-gradient(180deg, #1b1b1b, #121212);
}
.story-block__caption{
  position:absolute; bottom:14px; right:14px;
  background: rgba(0,0,0,.45); padding:.5rem .7rem; border-radius:999px; font-size:.9rem; color:#e9e9e9
}

.video-block {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; /* fallback */
  box-shadow: 0 0 40px rgba(255, 100, 0, 0.25);
}

.ignite-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* instead of cover */
  background-color: #000; /* fills any empty bars */
  opacity: 1;
  z-index: 0;
}


.story-block__caption {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
  pointer-events: none;
}
/* Keep the caption as a small pill in the bottom-right on the video block */
.video-block .story-block__caption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(0,0,0,.45);
  padding: .5rem .7rem;
  border-radius: 999px;
  font-size: .9rem;
  color: #e9e9e9;
  text-align: right;   /* avoid centering */
  text-shadow: none;   /* optional: cleaner pill text */
}


/* ===== Checklist ===== */
.checklist{list-style:none;padding:0;margin:1rem 0}
.checklist li{position:relative;padding-left:28px;margin:.5rem 0;color:#d6d6d6}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--orange-1); font-weight:800
}

/* ===== Quotes ===== */
.quote{
  margin:0; padding:18px; background:#121212; border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-2);
}
.quote p{margin:.1rem 0 .4rem}
.quote cite{color:#bdbdbd; font-style:normal}

/* ===== Newsletter ===== */
.newsletter{ text-align:center }
.newsletter form{justify-content:center; margin-top:10px}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:#0f0f0f; padding:26px 0; color:#c9c9c9;
}
.foot-nav a{display:inline-block;margin:6px 12px 0 0;color:#d2d2d2;text-decoration:none}
.foot-nav a:hover{color:#fff}
.muted{color:#a9a9a9}

/* Subtle page background texture */
.bg-stone{
  background:
    radial-gradient(900px 400px at 10% -20%, rgba(255,115,0,.05), transparent 60%),
    radial-gradient(700px 300px at 90% -10%, rgba(254,88,0,.05), transparent 60%),
    linear-gradient(180deg, #101010, #0e0e0e 40%, #101010);
}

/* --- Pillars (visuals) --- */
#pillars {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #121212, #151515);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 64px 0; /* keep same spacing as .section */
}

/* warm ember glow behind cards */
#pillars::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(60% 60% at 50% 60%, rgba(255,120,40,.10), rgba(255,120,40,0) 60%);
  pointer-events: none;
  z-index: 0;
}

/* card styling inside the pillars */
#pillars .card {
  position: relative;
  z-index: 1;
  background: #111;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  padding: 20px;
}

/* small colored “icon” pips */
#pillars .card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #ff8a00, #ff5a00);
  box-shadow: 0 0 22px rgba(255,120,40,.35);
}

/* science = cool blue, care = green */
#pillars .card:nth-child(2) .card__icon {
  background: linear-gradient(180deg, #6ab7ff, #3e7bff);
  box-shadow: 0 0 22px rgba(90,150,255,.35);
}
#pillars .card:nth-child(3) .card__icon {
  background: linear-gradient(180deg, #78d38b, #2ca34a);
  box-shadow: 0 0 22px rgba(72,200,110,.30);
}

#pillars .card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 20px rgba(255,130,30,0.25),
    0 8px 32px rgba(0,0,0,0.8);
}


#pillars .card:hover .card__icon {
  box-shadow: 0 0 40px var(--icon-glow, #ff8a00);
}

/* individual glow hues */
#pillars .card:nth-child(1) .card__icon {
  --icon-glow: #ff8a00; /* orange */
}
#pillars .card:nth-child(2) .card__icon {
  --icon-glow: #5da8ff; /* blue */
}
#pillars .card:nth-child(3) .card__icon {
  --icon-glow: #63e380; /* green */
}

/* soft warm field behind all cards */
#pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 70%, rgba(255,100,0,0.07), transparent 70%);
  z-index: 0;
}

#pillars {
  position: relative;
  background: radial-gradient(circle at 50% 120%, rgba(255,120,40,0.12) 0%, #121212 80%);
}

#pillars .card {
  background: rgba(20,20,20,0.95);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  padding: 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#pillars .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 24px rgba(255,130,40,0.25);
}

/* warm line under titles */
#pillars .card__title {
  position: relative;
}
#pillars .card__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 40px; height: 2px;
  background: linear-gradient(90deg, #ff8a00, transparent);
}
#pillars {
  position: relative;
  background: radial-gradient(circle at 50% 110%, rgba(80,200,140,0.08) 0%, #121212 80%);
}

#pillars .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 24px rgba(80,200,140,0.25);
}

#pillars .card__title::after {
  background: linear-gradient(90deg, #63e380, transparent);
}


/* --- END Pillars --- */


.product__media {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 220px;
  background-color: #111;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* make all images behave consistently */
.product__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* optional hover glow for all */
.product__media:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
}
.product__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 220px;
  background-color: #111;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 0 25px rgba(255, 100, 0, 0.3),
    0 0 60px rgba(255, 40, 0, 0.1);
}
/* ember field floating behind the product card */
.product__media::before,
.product__media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
}

/* background layer: subtle orange haze flicker */
.product__media::before {
  background: radial-gradient(circle at 50% 80%, rgba(255, 100, 0, 0.3), transparent 60%);
  animation: emberGlow 6s ease-in-out infinite alternate;
}

/* foreground layer: moving particles */
.product__media::after {
  background-image: radial-gradient(2px 2px at 0 0, rgba(255, 160, 0, 0.7), transparent),
                    radial-gradient(1px 1px at 30% 20%, rgba(255, 200, 0, 0.6), transparent),
                    radial-gradient(1.5px 1.5px at 70% 40%, rgba(255, 120, 0, 0.8), transparent),
                    radial-gradient(2px 2px at 90% 80%, rgba(255, 180, 0, 0.7), transparent);
  animation: cindersDrift 8s linear infinite;
  filter: blur(0.3px);
}

/* glow flicker */
@keyframes emberGlow {
  0% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.05); }
  100% { opacity: 0.18; transform: scale(0.98); }
}

/* slow drifting cinders behind card */
@keyframes cindersDrift {
  0% {
    background-position: 0 0, 10% 20%, 30% 80%, 50% 60%;
  }
  50% {
    background-position: 0 10%, 15% 10%, 40% 90%, 60% 70%;
  }
  100% {
    background-position: 0 -20%, 25% -30%, 50% 100%, 70% 90%;
  }
}
