/* ============================================
   HERO
   ============================================ */
.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:120px;
  background:var(--grad-ocean);
  position:relative;
  overflow:hidden;
  color:#fff;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 80% 20%, rgba(61,166,66,.35), transparent 60%),
             radial-gradient(ellipse 50% 50% at 10% 80%, rgba(242,148,29,.22), transparent 60%);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-5);
  align-items:center;
}
@media(max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:var(--sp-4); } }

.hero-eyebrow{ color:#FFD9A3; }
.hero-eyebrow::before{ background:var(--orange-300); }
.hero h1{ color:#fff; margin-block:1.1rem 1.3rem; }
.hero h1 em{ font-style:normal; background:linear-gradient(120deg,#FFD9A3,#F2941D); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lede{ color:#CFE3F2; }
.hero-cta{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:var(--sp-4); margin-top:var(--sp-5); flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:var(--step-2); color:#fff; }
.hero-stat span{ font-size:.82rem; color:#9FC2DC; }

.hero-visual{ position:relative; }
.hero-visual .glow-ring{
  position:absolute; inset:-6%;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--orange-500), var(--green-500), var(--blue-300), var(--orange-500));
  filter:blur(50px); opacity:.35;
  animation:spin 16s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-card{
  position:relative; border-radius:var(--radius-l);
  overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.25);
  transform:rotate(-1.5deg);
}
.hero-card img{ width:100%; height:560px; object-fit:cover; }
@media(max-width:560px){ .hero-card img{ height:380px; } }
.hero-float-badge{
  position:absolute; bottom:-22px; inset-inline-start:-22px;
  background:#fff; color:var(--blue-900);
  padding:16px 20px; border-radius:var(--radius-m);
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px;
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.hero-float-badge b{ display:block; font-family:var(--font-display); font-size:1.3rem; }
.hero-float-badge span{ font-size:.74rem; color:var(--ink-soft); }
.hero-float-badge .dot{ width:42px; height:42px; border-radius:50%; background:var(--grad-spark); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }

.scroll-cue{
  position:absolute; bottom:28px; inset-inline-start:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#BBD6EA; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(#fff,transparent); animation:scrollcue 2s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============================================
   INTRO / ABOUT-PREVIEW
   ============================================ */
.intro{ background:var(--soft-white); }
.intro-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-5); align-items:center; }
@media(max-width:900px){ .intro-grid{ grid-template-columns:1fr; } }
.intro-media{ position:relative; }
.intro-media .frame{
  border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:4/5;
}
.intro-media .frame img{ width:100%; height:100%; object-fit:cover; }
.intro-media .frame-accent{
  position:absolute; width:55%; aspect-ratio:1/1.1; border-radius:var(--radius-l);
  bottom:-12%; inset-inline-end:-10%;
  overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid var(--soft-white);
}
.intro-media .frame-accent img{ width:100%; height:100%; object-fit:cover; }
.intro-list{ display:grid; gap:1rem; margin-top:1.6rem; }
.intro-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.intro-list .ico{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:var(--blue-100); color:var(--blue-700);
  display:flex; align-items:center; justify-content:center;
}

/* ============================================
   STATS BAND
   ============================================ */
.stats-band{
  background:var(--blue-900);
  color:#fff;
  padding-block:var(--sp-5);
  position:relative; overflow:hidden;
}
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); position:relative; z-index:1; }
@media(max-width:760px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
.stat-card{ text-align:center; padding:var(--sp-3); border-inline-start:1px solid rgba(255,255,255,.12); }
.stat-card:first-child{ border-inline-start:none; }
@media(max-width:760px){ .stat-card{ border-inline-start:none; border-top:1px solid rgba(255,255,255,.12); } .stat-card:nth-child(1),.stat-card:nth-child(2){ border-top:none; } }
.stat-num{ font-family:var(--font-display); font-size:var(--step-4); display:flex; justify-content:center; align-items:baseline; gap:.15em; color:#fff; }
.stat-num .suffix{ font-size:.5em; color:var(--orange-300); }
.stat-label{ margin-top:.5rem; font-size:.85rem; color:#9FC2DC; }

/* ============================================
   WHY CHOOSE US
   ============================================ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-5); }
@media(max-width:880px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{
  background:#fff; border-radius:var(--radius-l); padding:var(--sp-3);
  border:1px solid var(--line);
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
  position:relative; overflow:hidden;
}
.why-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.why-card .num{ font-family:var(--font-mono); color:var(--line); font-size:.78rem; }
.why-card .ico{
  width:54px; height:54px; border-radius:16px; margin-block:1rem;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:var(--grad-ocean);
}
.why-card h3{ font-size:1.18rem; margin-bottom:.5rem; }
.why-card p{ color:var(--ink-soft); font-size:.92rem; }
.why-card:nth-child(2) .ico{ background:linear-gradient(135deg,var(--green-500),var(--green-700)); }
.why-card:nth-child(3) .ico{ background:linear-gradient(135deg,var(--orange-500),var(--orange-600)); }
.why-card:nth-child(5) .ico{ background:linear-gradient(135deg,var(--green-500),var(--blue-700)); }
.why-card:nth-child(6) .ico{ background:linear-gradient(135deg,var(--orange-500),var(--blue-700)); }

/* ============================================
   PRODUCT SHOWCASE
   ============================================ */
.showcase{ background:var(--mist); position:relative; overflow:hidden; }
.brand-tabs{ display:flex; gap:.6rem; margin-top:var(--sp-3); flex-wrap:wrap; }
.brand-tab{
  padding:11px 22px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff; font-weight:700; font-size:.88rem;
  transition:all var(--dur-1) var(--ease-out);
}
.brand-tab.active{ background:var(--blue-900); color:#fff; border-color:var(--blue-900); }

.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-4);
}
@media(max-width:980px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .product-grid{ grid-template-columns:1fr; } }

.product-card{
  background:#fff; border-radius:var(--radius-l); overflow:hidden;
  border:1px solid var(--line);
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#0c2436; }
.product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.product-card:hover .product-media img{ transform:scale(1.07); }
.product-badge{
  position:absolute; top:14px; inset-inline-start:14px;
  background:var(--grad-spark); color:#fff; font-size:.7rem; font-weight:800;
  padding:5px 12px; border-radius:var(--radius-pill); letter-spacing:.03em;
}
.product-weight{
  position:absolute; bottom:14px; inset-inline-end:14px;
  background:rgba(255,255,255,.9); color:var(--blue-900); font-family:var(--font-mono);
  font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:var(--radius-pill);
}
.product-body{ padding:var(--sp-3); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.product-body h3{ font-size:1.12rem; }
.product-body p{ font-size:.86rem; color:var(--ink-soft); flex:1; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; }
.product-price{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--blue-700); }
.product-price small{ font-family:var(--font-body); font-weight:600; font-size:.7rem; color:var(--ink-soft); }

/* ============================================
   ADVANTAGES (split)
   ============================================ */
.advantages{ background:var(--soft-white); }
.adv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:center; }
@media(max-width:900px){ .adv-grid{ grid-template-columns:1fr; } }
.adv-media{ position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-lg); }
.adv-media img{ width:100%; height:520px; object-fit:cover; }
@media(max-width:560px){ .adv-media img{ height:340px; } }
.adv-list{ display:grid; gap:1.4rem; margin-top:var(--sp-3); }
.adv-item{ display:flex; gap:1rem; }
.adv-item .chk{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--green-500); color:#fff; display:flex; align-items:center; justify-content:center;
  margin-top:.2rem;
}
.adv-item h4{ font-size:1.04rem; color:var(--blue-900); margin-bottom:.25rem; }
.adv-item p{ font-size:.9rem; color:var(--ink-soft); }

/* ============================================
   PROCESS / MANUFACTURING TIMELINE
   ============================================ */
.process{ background:var(--blue-900); color:#fff; overflow:hidden; }
.process-track{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-5); position:relative;
}
@media(max-width:900px){ .process-track{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .process-track{ grid-template-columns:1fr; } }
.process-track::before{
  content:""; position:absolute; top:26px; left:6%; right:6%; height:1px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px);
}
@media(max-width:900px){ .process-track::before{ display:none; } }
.process-step{ position:relative; z-index:1; }
.process-step .pn{
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.1rem; margin-bottom:1.2rem;
  color:var(--orange-300);
}
.process-step h4{ color:#fff; font-size:1.05rem; margin-bottom:.4rem; }
.process-step p{ color:#9FC2DC; font-size:.86rem; }

/* ============================================
   GALLERY
   ============================================ */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; gap:14px; margin-top:var(--sp-4);
}
.gallery-grid figure{ overflow:hidden; border-radius:var(--radius-m); position:relative; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.gallery-grid figure:hover img{ transform:scale(1.09); }
.gallery-grid figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gallery-grid figure:nth-child(4){ grid-row:span 2; }
.gallery-grid figure:nth-child(6){ grid-column:span 2; }
@media(max-width:880px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gallery-grid figure:nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .gallery-grid figure:nth-child(4){ grid-row:span 1; }
}
.gallery-cap{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px;
  background:linear-gradient(to top, rgba(4,32,63,.75), transparent 60%);
  opacity:0; transition:opacity .3s;
  color:#fff; font-size:.8rem; font-weight:600;
}
.gallery-grid figure:hover .gallery-cap{ opacity:1; }

/* ============================================
   CTA BAND
   ============================================ */
.cta-band{
  background:var(--grad-ocean);
  color:#fff; text-align:center; position:relative; overflow:hidden;
  padding-block:var(--sp-6);
}
.cta-band h2{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta-band .lede{ color:#CFE3F2; margin-inline:auto; }
.cta-row{ display:flex; gap:1rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }

/* ============================================
   CONTACT PREVIEW (home)
   ============================================ */
.contact-preview{ background:var(--soft-white); }
.cp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-4); }
@media(max-width:880px){ .cp-grid{ grid-template-columns:1fr; } }
.cp-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:var(--sp-3);
  display:flex; gap:1rem; align-items:flex-start;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1);
}
.cp-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.cp-card .ico{ width:46px; height:46px; border-radius:13px; background:var(--blue-100); color:var(--blue-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cp-card h4{ font-size:1rem; margin-bottom:.3rem; color:var(--blue-900); }
.cp-card p{ font-size:.86rem; color:var(--ink-soft); }