/* =========================================================================
   Page-specific styles
   ========================================================================= */

/* ---------- Hero (home) ---------- */
.hero{
  position: relative;
  padding-block: var(--sp-xl) var(--sp-lg);
  overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px){ .hero-grid{ grid-template-columns: 1fr 1fr; } }

.hero-media{
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: 8px;
}
.hero-media img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: calc(var(--r-2xl) - 8px);
   box-shadow:0 20px 50px rgba(0, 0, 0, 0.25);
  filter: saturate(0.9) contrast(1.08) brightness(0.96);
}
@media (min-width: 1024px){ .hero-media img{ height: 520px; } }

.hero-badge{
  position: absolute;
  bottom: 20px; right: 20px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-xl);
  animation: floatY 5s ease-in-out infinite;
}
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
.hero-badge .badge-icon{ background: var(--surface-container-highest); color: var(--primary); padding: 10px; border-radius: var(--r-lg); }

.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-container-high);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-sm);
}

.orbit-decor{
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* Trusted-by strip */
.trust-strip{
  border-block: 1px solid var(--outline-variant);
  padding-block: var(--sp-md);
  background: var(--surface-bright);
}
.trust-logos{
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-lg);
  opacity: 0.6; filter: grayscale(1);
  transition: opacity var(--dur-mid), filter var(--dur-mid);
}
.trust-logos:hover{ opacity: 1; filter: grayscale(0); }
.trust-logos span{ display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--on-surface-variant); }

/* Bento services grid */
.bento{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
@media (max-width: 900px){ .bento{ grid-template-columns: 1fr; } }
.bento .span-2{ grid-column: span 2; }
.bento .span-3{ grid-column: span 3; }
@media (max-width: 900px){ .bento .span-2, .bento .span-3{ grid-column: span 1; } }

.bento-card{
  position: relative;
  border-radius: var(--r-2xl);
  padding: var(--sp-md);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--outline-variant);
}
.bento-card.tone-light{ background: var(--surface-container-lowest); }
.bento-card.tone-tint{ background: var(--surface-container-low); }
.bento-card .bento-bg{
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.14;
  transition: opacity var(--dur-mid), transform var(--dur-slow) var(--ease-out);
}
.bento-card:hover .bento-bg{ opacity: 0.24; transform: scale(1.04); }
.bento-card .bento-bg img{ width: 100%; height: 100%; object-fit: cover; }
.bento-card > *{ position: relative; z-index: 1; }
.bento-card .card-icon{ margin-bottom: auto; }

/* Impact / stats band */
.stats-band{
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  position: relative;
  overflow: hidden;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  text-align: center;
}
@media (max-width: 820px){ .stats-grid{ grid-template-columns: 1fr 1fr; } }
.stats-grid > div{ padding: var(--sp-sm) 0; border-left: 1px solid rgba(234,241,255,0.15); }
.stats-grid > div:first-child{ border-left: none; }
@media (max-width: 820px){ .stats-grid > div{ border-left: none; border-top: 1px solid rgba(234,241,255,0.15); } .stats-grid > div:nth-child(1),.stats-grid > div:nth-child(2){border-top:none;} }
.stats-grid .stat-num{ color: var(--primary-fixed); }
.stats-grid .stat-label{ font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-fixed-dim); margin-top: 6px; }

/* Sector / process cards with big numeral */
.step-card{
  position: relative;
  border-radius: var(--r-2xl);
  padding: var(--sp-md);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-soft);
  height: 100%;
  display: flex; flex-direction: column;
  transition: border-color var(--dur-mid), transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.step-card:hover{ border-color: rgba(0,108,73,0.4); transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(11,28,48,0.2); }
.step-card .step-num{
  position: absolute; top: var(--sp-sm); right: var(--sp-sm);
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: 1;
  color: var(--surface-container-high);
  transition: color var(--dur-mid);
}
.step-card:hover .step-num{ color: rgba(78,222,163,0.35); }
.step-card .step-icon{
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--surface-container-highest);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-sm);
  transition: background var(--dur-mid), color var(--dur-mid);
}
.step-card:hover .step-icon{ background: var(--primary); color: #fff; }

.process-rail{
  position: relative;
}
.process-rail::before{
  content: "";
  position: absolute;
  top: 24px; left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--outline-variant) 0 8px, transparent 8px 16px);
  z-index: 0;
  display: none;
}
@media (min-width: 900px){ .process-rail::before{ display: block; } }

/* Tech highlight (dark asymmetric) */
.tech-highlight{
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  position: relative;
  overflow: hidden;
}
.tech-highlight-grid{
  display: grid;
  gap: var(--sp-lg);
  align-items: center;
}
@media (min-width: 900px){ .tech-highlight-grid{ grid-template-columns: 5fr 7fr; } }
.mini-media-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.mini-media-grid .col-shift{ padding-top: 48px; }
.mini-media-grid img{ border-radius: var(--r-2xl); height: 220px; width: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.mini-media-grid a:hover img, .mini-media-grid .media-frame:hover img{ transform: scale(1.05); }
.mini-media-grid .media-frame{ border-radius: var(--r-2xl); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.mini-stat{
  border-radius: var(--r-2xl);
  padding: var(--sp-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.mini-callout{
  border-radius: var(--r-2xl);
  padding: var(--sp-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 130px;
}

/* Sector cards (services page) */
.sector-card{
  position: relative;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-xl);
  padding: var(--sp-md);
  overflow: hidden;
  transition: box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-out);
}
.sector-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.sector-card .sector-icon-bg{
  position: absolute; top: -10px; right: -10px;
  font-size: 90px; opacity: 0.06; color: var(--primary);
  transition: opacity var(--dur-mid);
}
.sector-card:hover .sector-icon-bg{ opacity: 0.14; }
.sector-card ul{ display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-sm); }
.sector-card ul li{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-surface); }
.sector-card ul li .icon{ color: var(--primary); flex-shrink: 0; }

/* Compliance split */
.compliance-list .compliance-item{
  display: flex; gap: var(--sp-sm);
  padding: var(--sp-sm);
  border-radius: var(--r-lg);
  border: 1px solid var(--outline-variant);
  margin-bottom: var(--sp-xs);
}
.compliance-item .icon{ color: var(--primary); flex-shrink: 0; margin-top: 2px; }

.metric-trio{ display: flex; justify-content: space-around; padding-inline: var(--sp-sm); margin-top: var(--sp-sm); }
.metric-trio div{ text-align: center; }

/* Dashboard */
.dash-hero{ text-align: center; padding-block: var(--sp-lg) var(--sp-md); }
.dash-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
@media (max-width: 900px){ .dash-grid{ grid-template-columns: 1fr; } }
.dash-panel{
  border-radius: var(--r-xl);
  padding: var(--sp-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.dash-panel.span-2{ grid-column: span 2; }
@media (max-width: 900px){ .dash-panel.span-2{ grid-column: span 1; } }
.dash-glow{
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.25), transparent 70%);
  filter: blur(4px);
  transition: transform var(--dur-slow) var(--ease-out);
}
.dash-panel:hover .dash-glow{ transform: scale(1.3); }

.bar-chart{ display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 140px; }
.bar-chart .bar{ width: 26px; border-radius: 6px 6px 0 0; background: var(--secondary-fixed-dim); transition: height 1s var(--ease-out); }
.bar-chart .bar.is-primary{ background: var(--primary); }
.bar-chart .bar.is-dim{ background: var(--primary-fixed-dim); }

.material-row{ margin-bottom: var(--sp-sm); }
.material-row .row-head{ display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* Commitment split */
.commitment{
  border-radius: var(--r-2xl);
  padding: var(--sp-lg);
  background: var(--surface-container-low);
  display: grid;
  gap: var(--sp-lg);
  align-items: center;
}
@media (min-width: 900px){ .commitment{ grid-template-columns: 1fr 1fr; } }
.commitment img{ border-radius: var(--r-xl); height: 300px; width: 100%; object-fit: cover; }

/* Request pickup page */
.request-hero{
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(237,245,239,0.95));
  background-image: radial-gradient(circle, rgba(0,108,73,0.10) 1.2px, transparent 1.5px);
  background-size: 22px 22px;
}
.request-map-bg{
  display: none;
}
.request-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  width: 100%;
  padding-block: var(--sp-xl);
}
@media (min-width: 1024px){ .request-grid{ grid-template-columns: 5fr 7fr; align-items: start; } }

.perks-desktop{ display: none; flex-direction: column; }
@media (min-width: 1024px){ .perks-desktop{ display: flex; } }
.perk-item{ display: flex; gap: var(--sp-sm); align-items: flex-start; margin-bottom: var(--sp-sm); }
.perk-item .perk-icon{ width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface-container-highest); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.form-card{
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--sp-md);
  box-shadow: 0 18px 40px -20px rgba(16, 61, 43, 0.28);
  border: 1px solid rgba(0, 108, 73, 0.12);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 640px){ .form-card{ padding: var(--sp-lg); } }
.form-card-glow{
  position: absolute; inset: -16px; z-index: -1;
  background: rgba(16,185,129,0.13);
  filter: blur(32px);
  border-radius: var(--r-2xl);
}

.chip-row{ display: flex; flex-wrap: wrap; gap: 8px; }

.review-summary{ display: grid; gap: 10px; }
.review-row{ display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--outline-variant); font-size: 14px; }
.review-row dt{ color: var(--on-surface-variant); }
.review-row dd{ font-weight: 600; }

.success-panel{ text-align: center; padding: var(--sp-lg) 0; }
.success-icon{
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(16,185,129,0.15); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto; margin-bottom: var(--sp-sm);
  animation: popIn 0.5s var(--ease-out);
}
@keyframes popIn{ from{ transform: scale(0.6); opacity: 0;} to{ transform: scale(1); opacity: 1;} }

/* Accepted items */
.item-card{
  position: relative;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-xl);
  padding: var(--sp-sm);
  overflow: hidden;
  transition: box-shadow var(--dur-mid), transform var(--dur-mid) var(--ease-out);
}
.item-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.item-card .item-bg-icon{ position: absolute; top: -6px; right: -6px; opacity: 0.06; color: var(--primary); transition: opacity var(--dur-mid); }
.item-card:hover .item-bg-icon{ opacity: 0.15; }
.item-card .item-visual{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-sm);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  height: 150px;
}
.item-card .item-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.item-card .item-icon{ width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--surface-container); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-xs); }
.item-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-xs); }

.filter-bar{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-md); }

.warning-banner{
  border-radius: var(--r-2xl);
  padding: var(--sp-md);
  background: var(--error-container);
  color: var(--on-error-container);
  border: 1px solid rgba(186,26,26,0.2);
  display: flex; gap: var(--sp-sm); align-items: flex-start;
}
.warning-banner .warn-icon{ width: 44px; height: 44px; border-radius: 50%; background: rgba(186,26,26,0.1); color: var(--error); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.cta-panel{
  position: relative;
  border-radius: var(--r-2xl);
  padding: var(--sp-xl) var(--sp-md);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.cta-panel .cta-bg{ position: absolute; inset: 0; z-index: 0; opacity: 0.08; mix-blend-mode: overlay; }
.cta-panel .cta-bg img{ width: 100%; height: 100%; object-fit: cover; }
.cta-panel > *{ position: relative; z-index: 1; }

/* About page */
.page-hero{
 padding-block: var(--sp-xl) var(--sp-lg);
 background: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(255,255,255,0.12));
}
.page-hero .container{
 max-width: 900px;
}
.about-hero-copy{
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: center;
}
.about-hero-copy h1,
.about-hero-copy p{
 text-align: left;
}

.two-col{
 display: grid;
 gap: 48px;
 align-items: center;
}
@media (min-width: 900px){ .two-col{ grid-template-columns: 1.3fr 0.9fr; } }

.about-rail{
 display: grid;
 gap: 18px;
}
.rail-item{
 background: var(--surface-container-lowest);
 border: 1px solid var(--outline-variant);
 border-radius: var(--r-xl);
 padding: 20px 22px;
 box-shadow: var(--shadow-soft);
}
.rail-item b{
 display: block;
 margin-bottom: 8px;
 color: var(--on-background);
 font-family: var(--font-display);
 font-size: 18px;
}
.rail-item p{
 color: var(--on-surface-variant);
 line-height: 1.6;
}

.section--alt{
 background: linear-gradient(180deg, var(--section-alt), rgba(255,255,255,0.42));
 border-block: 1px solid var(--outline-variant);
}

.why-list{
 display: grid;
 gap: 14px;
}
.why-row{
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 18px;
 flex-wrap: nowrap;
 padding: 20px 24px;
 border-radius: var(--r-xl);
 border: 1px solid var(--outline-variant);
 background: rgba(255,255,255,0.5);
 box-shadow: var(--shadow-soft);
}
@media (max-width: 640px){
 .why-row{ flex-wrap: wrap; align-items: flex-start; }
}
.why-row .idx{
 display: inline-flex;
 width: 44px;
 height: 44px;
 border-radius: var(--r-full);
 align-items: center;
 justify-content: center;
 background: var(--surface-container-highest);
 color: var(--primary);
 font-family: var(--font-display);
 font-size: 18px;
 font-weight: 700;
 flex-shrink: 0;
}
.why-row h3{
 margin: 0 0 0;
 font-size: 22px;
 color: var(--on-background);
 flex-shrink: 0;
}
.why-row p{
 margin: 0;
 color: var(--on-surface-variant);
 line-height: 1.6;
 flex: 1;
}

.impact-grid{
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 18px;
}
@media (max-width: 900px){ .impact-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .impact-grid{ grid-template-columns: 1fr; } }

.impact-stat{
 padding: 26px 18px;
 border-radius: var(--r-xl);
 border: 1px solid var(--outline-variant);
 background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.9));
 text-align: center;
 box-shadow: var(--shadow-soft);
}
.impact-stat .num{
 display: flex;
 align-items: flex-end;
 justify-content: center;
 gap: 4px;
 font-family: var(--font-display);
 font-size: clamp(28px, 3vw, 40px);
 color: var(--primary);
 line-height: 1;
}
.impact-stat sup{ font-size: 16px; color: var(--on-surface-variant); }
.impact-stat .label{
 margin-top: 8px;
 color: var(--on-surface-variant);
 font-weight: 600;
 letter-spacing: 0.02em;
}

.cta-band{
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 24px;
 flex-wrap: wrap;
 padding: 32px;
 border: 1px solid var(--outline-variant);
 border-radius: var(--r-2xl);
 background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(255,255,255,0.82));
 box-shadow: var(--shadow-soft);
}