:host { display:block; background:#fff; color:#2e2a2a; font-family:"Inter","Segoe UI",sans-serif; }
section { scroll-margin-top: 96px; }
.container { max-width: 1140px; margin: 0 auto; padding: 1.25rem; }

.page-hero { 
  background: #abb8c3;
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  border-bottom: none;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
.hero-grid { 
  display:grid; 
  gap:3rem; 
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); 
  align-items:center;
  position: relative;
  z-index: 1;
}
.breadcrumb { 
  display:flex; 
  gap:.5rem; 
  align-items:center; 
  color:rgba(255,255,255,0.9); 
  font-size:.9rem; 
  margin-bottom:1.5rem;
}
.breadcrumb a { 
  color:rgba(255,255,255,0.9); 
  text-decoration:none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.breadcrumb a:hover { 
  color:#fff; 
  background: rgba(255,255,255,0.2);
  transform: translateX(2px);
}
.breadcrumb span { color: rgba(255,255,255,0.7); }
.hero-copy h1 { 
  margin: .5rem 0 1.5rem; 
  font-size:clamp(2rem, 5vw, 3.5rem); 
  line-height:1.1; 
  color:#fff;
  font-weight: 800;
  text-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: fadeInUp 0.8s ease-out;
}
.lead { 
  font-size:1.25rem; 
  line-height:1.8; 
  color:rgba(255,255,255,0.95); 
  max-width: 62ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}
.cta { 
  display:flex; 
  gap:1rem; 
  flex-wrap:wrap; 
  margin-top:1.5rem;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}
.btn { 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  border-radius:12px; 
  font-weight:600; 
  padding:1rem 2rem; 
  text-decoration:none; 
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-size: 1rem;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn-primary { 
  background:#fff; 
  color:#cf2e2e; 
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  z-index: 1;
}
.btn-primary:hover { 
  transform:translateY(-3px) scale(1.05); 
  box-shadow:0 8px 25px rgba(255,255,255,0.4);
}
.btn-outline { 
  border-color:rgba(255,255,255,0.5); 
  background:rgba(255,255,255,0.15); 
  color:#fff;
  backdrop-filter: blur(10px);
  z-index: 1;
}
.btn-outline:hover { 
  background:rgba(255,255,255,0.25);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(255,255,255,0.2);
}
.hero-media { 
  position: relative;
  animation: fadeInRight 1s ease-out 0.3s both;
}
.hero-media img { 
  width:100%; 
  border-radius:24px; 
  box-shadow:0 25px 50px rgba(0,0,0,0.4); 
  background:#fff;
  padding:1.5rem;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}
.hero-media:hover img {
  transform: scale(1.02) rotate(1deg);
}
.stats { 
  margin-top:2rem; 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); 
  gap:1rem;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}
.stat-card { 
  background:rgba(255,255,255,0.15); 
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.3); 
  border-radius:16px; 
  padding:1.25rem 1.5rem; 
  text-align:left; 
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.stat-card:hover {
  background: rgba(255,255,255,0.25);
  transform: translateX(5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.stat-card .value { 
  display:block; 
  font-size:1.6rem; 
  font-weight:700; 
  color:#fff;
}
.stat-card .label { 
  display:block; 
  margin-top:.2rem; 
  color:rgba(255,255,255,0.9); 
  font-size:.9rem; 
}

.section-nav { 
  display:flex; 
  gap:.5rem; 
  justify-content:center; 
  padding:1rem;
  flex-wrap:wrap;
  background:rgba(255,255,255,0.95); 
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(220,38,38,.15); 
  position:sticky; 
  top:72px; 
  z-index:5; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.section-nav button { 
  border:none; 
  cursor:pointer; 
  padding:.75rem 1.5rem; 
  border-radius:12px; 
  background:transparent; 
  color:#000000; 
  font-weight:600; 
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.section-nav button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: #abb8c3;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.section-nav button:hover { 
  background:rgba(254,202,202,.4);
  transform: translateY(-2px);
}
.section-nav button.active { 
  background: #abb8c3; 
  color:#fff; 
  box-shadow:0 8px 20px rgba(220,38,38,.3);
  transform: translateY(-2px);
}
.section-nav button.active::before {
  width: 80%;
}

.applications-section { background:#fff; padding:3rem 1.25rem 0; border-top:1px solid rgba(220,38,38,.12); }
.applications-header { text-align:center; max-width:860px; margin:0 auto 2.5rem; }
.applications-header h2 { font-size:2.2rem; margin:0 0 .75rem; color:#9b111e; }
.applications-header p { margin:0; color:#611219; line-height:1.6; }
.application-grid { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:3rem; }
.app-card { background:#fff; border:1px solid rgba(220,38,38,.18); border-radius:20px; box-shadow:0 16px 34px rgba(185,28,28,.12); overflow:hidden; display:flex; flex-direction:column; }
.app-card img { width:100%; height:180px; object-fit:cover; }
.card-body { padding:1.4rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.card-body h3 { margin:0; font-size:1.15rem; color:#83121d; }
.card-body p { margin:0; color:#611219; line-height:1.6; flex:1; }
.card-link { align-self:flex-start; padding:.45rem 1rem; border-radius:999px; background: #abb8c3; color:#fff; font-weight:600; text-decoration:none; transition:.2s; box-shadow:0 10px 24px rgba(220,38,38,.25); }
.card-link:hover { background:#e63939; }
.applications-section .overview-panels { display:grid; gap:2.5rem; padding-bottom:3rem; }
.applications-section .panel { background:#fff; border-radius:26px; box-shadow:0 26px 46px rgba(185,28,28,.12); border:1px solid rgba(220,38,38,.12); padding:2rem; display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
.applications-section .panel h2 { margin:0 0 1rem; font-size:2rem; color:#9b111e; }
.applications-section .panel ul { margin:0; padding-left:1.2rem; color:#611219; line-height:1.6; }
.applications-section .panel-media img,
.applications-section .panel-media video { width:100%; border-radius:20px; border:1px solid rgba(220,38,38,.2); box-shadow:0 18px 38px rgba(185,28,28,.18); background:#fff; }

.workflow { display:grid; gap:2rem; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); align-items:center; padding:3rem 1.25rem; background:#fff; border-top:1px solid rgba(220,38,38,.12); border-bottom:1px solid rgba(220,38,38,.12); }
.workflow-copy h2 { margin-bottom:.75rem; font-size:2rem; color:#9b111e; }
.workflow-copy p { color:#611219; margin-bottom:1.5rem; }
.workflow-copy ol { margin:0; padding-left:1.4rem; color:#421015; }
.workflow-copy li { font-weight:600; margin-bottom:.8rem; }
.workflow-copy li span { display:block; font-weight:400; color:#611219; margin-top:.25rem; }
.workflow-video { width:100%; border-radius:20px; border:1px solid rgba(220,38,38,.25); box-shadow:0 20px 40px rgba(185,28,28,.2); background:#000; }

.video-gallery { padding:3rem 1.25rem; background:#fff; }
.video-gallery h2 { text-align:center; margin-bottom:2rem; font-size:2.2rem; color:#9b111e; }
.video-grid { display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.video-card { background:#fff; border-radius:22px; border:1px solid rgba(220,38,38,.18); box-shadow:0 16px 36px rgba(185,28,28,.12); overflow:hidden; display:flex; flex-direction:column; }
.video-card video { width:100%; background:#000; }
.video-card figcaption { padding:1rem 1.25rem 1.25rem; color:#611219; display:flex; flex-direction:column; gap:.35rem; }
.video-card strong { color:#421015; font-size:1.05rem; }

.specs { background:#fff; padding:3rem 1.25rem; border-top:1px solid rgba(220,38,38,.12); border-bottom:1px solid rgba(220,38,38,.12); }
.specs h2 { text-align:center; margin-bottom:2.5rem; font-size:2.2rem; color:#9b111e; }
.spec-table { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.spec-group { background:#fff; border-radius:20px; border:1px solid rgba(220,38,38,.18); box-shadow:0 18px 38px rgba(185,28,28,.12); overflow:hidden; }
.spec-group h3 { margin:0; padding:1.25rem 1.5rem; background: #abb8c3; color:#fff; font-size:1.2rem; }
.spec-group table { width:100%; border-collapse:collapse; }
.spec-group th, .spec-group td { padding:1rem 1.5rem; border-top:1px solid rgba(220,38,38,.15); text-align:left; vertical-align:top; }
.spec-group th { width:42%; font-weight:600; color:#421015; }
.spec-group td { color:#611219; }

.resources { padding:3rem 1.25rem 4rem; background:#fff; }
.resource-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:2rem; }
.resource-block { background:#fff; border-radius:20px; border:1px solid rgba(220,38,38,.18); box-shadow:0 12px 30px rgba(185,28,28,.12); padding:1.75rem; }
.resource-block h3 { margin-top:0; margin-bottom:1rem; color:#9b111e; }
.resource-block ul { margin:0; padding-left:1rem; display:grid; gap:.5rem; color:#611219; }
.resource-block a { color:#cf2e2e; text-decoration:none; font-weight:600; }
.resource-block a:hover { text-decoration:underline; }
.tutorials { background: #abb8c3; border-radius:24px; padding:2rem; color:#fff; box-shadow:0 22px 44px rgba(185,28,28,.28); }
.tutorials h3 { margin-top:0; }
.tutorials ul { margin:0; padding-left:1.2rem; display:grid; gap:.6rem; }
.tutorials a { color:#fde8e8; text-decoration:none; }
.tutorials a:hover { text-decoration:underline; color:#fff; }

@media (max-width: 980px) {
  .hero-grid, .applications-section .panel, .workflow { grid-template-columns:1fr; }
  .applications-section .panel-media { order:-1; }
}

@media (max-width: 640px) {
  .hero-copy h1 { font-size:2.1rem; }
  .lead { font-size:1rem; }
  .section-nav { justify-content:flex-start; overflow-x:auto; }
}