/* ======================================================
   ARMORA — PREMIUM AUTOMOTIVE PROTECTION BRAND
   Design System: Deep Black + Warm Ivory + Champagne Gold
====================================================== */

:root{
  /* Palette */
  --c-black:          #0b0b0b;
  --c-black-deep:      #080808;
  --c-charcoal:        #151515;
  --c-ivory:           #faf8f2;
  --c-offwhite:        #f5f3ee;
  --c-white:           #ffffff;
  --c-gray:            #040404;

  --gold:              #c9a45c;
  --gold-light:        #d8b978;
  --gold-deep:         #a9813e;
  --gold-gradient:     linear-gradient(135deg, #c9a45c 0%, #e3c78b 50%, #a9813e 100%);

  --border-soft:       rgba(255,255,255,0.09);
  --border-gold:       rgba(201,164,92,0.35);
  --border-ink:        rgba(11,11,11,0.08);

  --text-light:        #f2f0ea;
  --text-muted:        #a5a29b;
  --text-ink:          #15130f;
  --text-ink-muted:    var(--c-gray);

  --surface:           #141414;
  --surface-2:         #1a1a1a;
  --surface-white:     #ffffff;

  --shadow-sm:         0 8px 24px rgba(11,11,11,.07);
  --shadow-md:         0 20px 46px rgba(11,11,11,.09);
  --shadow-gold:       0 14px 34px rgba(201,164,92,.25);

  --radius-sm:         8px;
  --radius-md:         16px;
  --radius-lg:         22px;

  --transition:        all .45s cubic-bezier(.22,.61,.36,1);
  --transition-fast:   all .25s ease;
  --ease:              cubic-bezier(.22,.61,.36,1);

  --ff-body:           'Plus Jakarta Sans', sans-serif;
  --ff-accent:         'Cormorant Garamond', serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--c-black);
  color:var(--text-light);
  font-family:var(--ff-body);
  font-weight:400;
  overflow-x:hidden;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--gold); color:#0b0b0b;}

a{text-decoration:none; color:inherit; transition:var(--transition-fast);}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-body);
  font-weight:700;
  color:var(--text-light);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0;
}

p{color:var(--text-muted); margin:0;}
img{max-width:100%; display:block;}

.text-gold{color:var(--gold);}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--c-black);}
::-webkit-scrollbar-thumb{background:var(--gold-deep); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* ======================================================
   REDUCED MOTION
====================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important; transform:none !important;}
  .hero-in{opacity:1 !important; transform:none !important;}
}

/* ======================================================
   SCROLL REVEAL ENGINE (IntersectionObserver driven)
====================================================== */
[data-reveal]{
  opacity:0;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
[data-reveal="fade-up"]{transform:translateY(34px);}
[data-reveal="fade-left"]{transform:translateX(-42px);}
[data-reveal="fade-right"]{transform:translateX(42px);}
[data-reveal="scale-in"]{transform:scale(.94);}
[data-reveal="draw-x"]{transform:scaleX(0); transform-origin:left;}
[data-reveal].is-revealed{opacity:1; transform:translate(0,0) scale(1);}

/* ======================================================
   SECTION STRUCTURE — all body sections
====================================================== */
.about-section, .features-strip, .products-section,
.ceramic-section, .process-section, .testimonials-section{
  position:relative;
  overflow:hidden;
}
.about-section > .container, .features-strip > .container,
.products-section > .container, .ceramic-section > .container,
.process-section > .container, .testimonials-section > .container{
  position:relative; z-index:2;
}

/* ---- Light sections (white content areas): About, Products, Process ---- */
.about-section, .products-section, .process-section{ background:var(--c-white); }
.about-section :is(h1,h2,h3,h4,h5,h6),
.products-section :is(h1,h2,h3,h4,h5,h6),
.process-section :is(h1,h2,h3,h4,h5,h6){
  color:var(--text-ink);
}
.about-section p, .products-section p, .process-section p{
  color:var(--text-ink-muted);
}
.about-section .text-gold, .products-section .text-gold, .process-section .text-gold{
  color:var(--gold-deep);
}
.about-section .eyebrow, .products-section .eyebrow, .process-section .eyebrow{
  color:var(--gold-deep);
  background:rgba(201,164,92,.09);
  border-color:rgba(201,164,92,.4);
}
.about-section .btn-gold-outline, .products-section .btn-gold-outline, .process-section .btn-gold-outline{
  color:var(--gold-deep) !important;
  border-color:rgba(201,164,92,.5);
}

/* ---- Dark / cinematic sections: Why Armora, Ceramic, Testimonials ---- */
.features-strip, .ceramic-section, .testimonials-section{
  color:var(--text-light);
}
.ceramic-section{ background:var(--c-charcoal); }

.features-strip, .testimonials-section{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.features-strip{ background-image:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1800&q=70'); }
.testimonials-section{ background-image:url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?w=1800&q=70'); }
.features-strip::before, .testimonials-section::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.85) 50%, rgba(8,8,8,.93) 100%);
  z-index:0;
}
@media (hover:hover) and (pointer:fine){
  .features-strip, .testimonials-section{ background-attachment:fixed; }
}
.features-strip .section-blob, .testimonials-section .section-blob{ z-index:1; }

/* Animated gradient blobs (subtle) */
.section-blob{
  position:absolute;
  width:380px; height:380px;
  border-radius:50%;
  filter:blur(110px);
  z-index:0;
  pointer-events:none;
  animation:floatGlow 13s ease-in-out infinite;
}
.blob-gold{background:rgba(201,164,92,.16);}
.blob-cream{background:rgba(201,164,92,.10);}
.blob-pos-tl{top:-120px; left:-120px;}
.blob-pos-tr{top:-120px; right:-120px; animation-delay:1.5s;}
.blob-pos-br{bottom:-140px; right:-100px; animation-delay:3s;}
.blob-pos-bl{bottom:-120px; left:-100px; animation-delay:4.5s;}
@keyframes floatGlow{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(26px,-20px) scale(1.1);}
}

/* ======================================================
   BUTTONS
====================================================== */
.btn-gold-fill{
  background:var(--gold-gradient);
  color:#100c00 !important;
  border:none;
  font-weight:600;
  padding:.8rem 1.85rem;
  border-radius:50px;
  display:inline-flex; align-items:center; gap:.55rem;
  box-shadow:0 6px 18px rgba(201,164,92,.28);
  transition:var(--transition);
  position:relative;
}
.btn-gold-fill i{transition:transform .35s var(--ease);}
.btn-gold-fill:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(201,164,92,.4);
  color:#100c00;
}
.btn-gold-fill:hover i{transform:translateX(4px);}

.btn-gold-outline{
  background:transparent;
  color:var(--gold-light) !important;
  border:1.5px solid var(--border-gold);
  font-weight:600;
  padding:.75rem 1.75rem;
  border-radius:50px;
  display:inline-flex; align-items:center; gap:.55rem;
  transition:var(--transition);
}
.btn-gold-outline i{transition:transform .35s var(--ease);}
.btn-gold-outline:hover{
  background:var(--gold);
  color:#100c00 !important;
  border-color:transparent;
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(201,164,92,.3);
}
.btn-gold-outline:hover i{transform:translateX(4px);}

.btn-ghost-light{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff !important;
  font-weight:600;
  padding:.75rem 1.75rem;
  border-radius:50px;
  display:inline-flex; align-items:center; gap:.55rem;
  transition:var(--transition);
}
.btn-ghost-light:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  transform:translateY(-3px);
}

.hero-cta{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem;}

/* ======================================================
   TOP BAR
====================================================== */
.top-bar{
  background:var(--c-black-deep);
  border-bottom:1px solid var(--border-soft);
  font-size:.83rem;
  padding:.55rem 0;
}
.top-bar-inner{display:flex; align-items:center; justify-content:space-between;}
.top-bar-left{display:flex; align-items:center; gap:1.5rem;}
.top-bar-left a, .top-bar-left span{color:var(--text-muted);}
.top-bar-left i{color:var(--gold); margin-right:.35rem;}
.top-bar-left a:hover{color:var(--gold-light);}
.top-bar-right{display:flex; align-items:center; gap:.65rem;}
.top-bar-right a{
  color:var(--text-muted);
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-soft);
  border-radius:50%;
  font-size:.78rem;
  transition:var(--transition-fast);
}
.top-bar-right a:hover{color:#100c00; background:var(--gold); border-color:transparent;}

/* ======================================================
   NAVBAR — transparent over hero, glass once scrolled
====================================================== */
.main-navbar{
  background:transparent;
  border-bottom:1px solid rgba(201,164,92,.14);
  padding:0.35rem 0;
  position:sticky; top:0; z-index:1000;
  transition:var(--transition);
}
.main-navbar.scrolled{
  background:rgba(8,8,8,.8);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:transparent;
  padding:.7rem 0;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.main-navbar.scrolled::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity:.55;
}
.navbar-brand img{
  height:66px; width:auto;
  transition:var(--transition);
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.main-navbar.scrolled .navbar-brand img{height:36px;}
.navbar-brand:hover img{transform:scale(1.04);}

.navbar-nav .nav-link{
  color:var(--text-light) !important;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.5rem 1rem !important;
  position:relative;
  transition:color .3s ease;
}
.navbar-nav .nav-link::after{
  content:'';
  position:absolute;
  left:1rem; right:1rem; bottom:.15rem;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{color:var(--gold-light) !important;}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{transform:scaleX(1);}

.main-navbar .btn-gold-fill{
  padding:.6rem 1.5rem;
  font-size:.8rem;
  letter-spacing:.03em;
}

.navbar-toggler{border:none; padding:0; width:32px; display:flex; flex-direction:column; gap:6px;}
.navbar-toggler:focus{box-shadow:none;}
.toggler-line{width:100%; height:1.5px; background:var(--gold); display:block; transition:var(--transition);}

/* Mobile menu: staggered fade-in for nav items */
@media(max-width:991px){
  .navbar-collapse .navbar-nav > li{opacity:0; transform:translateY(10px);}
  .navbar-collapse.show .navbar-nav > li{animation:navItemIn .5s var(--ease) forwards;}
  .navbar-collapse.show .navbar-nav > li:nth-child(1){animation-delay:.04s;}
  .navbar-collapse.show .navbar-nav > li:nth-child(2){animation-delay:.09s;}
  .navbar-collapse.show .navbar-nav > li:nth-child(3){animation-delay:.14s;}
  .navbar-collapse.show .navbar-nav > li:nth-child(4){animation-delay:.19s;}
  .navbar-collapse.show .navbar-nav > li:nth-child(5){animation-delay:.24s;}
  @keyframes navItemIn{ to{opacity:1; transform:translateY(0);} }
}

.dropdown-menu{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:.5rem;
  margin-top:.75rem !important;
  box-shadow:0 20px 45px rgba(0,0,0,.55);
}
.dropdown-item{
  color:var(--text-light);
  border-radius:8px;
  padding:.55rem .9rem;
  font-size:.9rem;
  display:flex; align-items:center; justify-content:space-between;
}
.dropdown-item:hover, .dropdown-item:focus{
  background:rgba(201,164,92,.1);
  color:var(--gold-light);
}
.dropdown-submenu{position:relative;}
.dropdown-menu-sub{ top:0; left:100%; margin-top:0 !important; display:none; }
.dropdown-submenu:hover > .dropdown-menu-sub{display:block;}
@media(min-width:992px){
  .main-navbar .nav-item.dropdown:hover > .dropdown-menu,
  .main-navbar .nav-item.dropdown:focus-within > .dropdown-menu{
    display:block;
    margin-top:0 !important;
  }
}
@media(max-width:991px){
  .dropdown-menu-sub{position:static; display:none; border:none; box-shadow:none; padding-left:1rem; background:transparent;}
  .dropdown-submenu:hover > .dropdown-menu-sub{display:block;}
}

/* ======================================================
   SECTION GENERIC
====================================================== */
section{position:relative; padding:7rem 0;}
.section-heading{max-width:700px; margin-inline:auto; margin-bottom:1.25rem;}
.section-heading h2{font-size:clamp(1.9rem, 3.2vw, 2.7rem); line-height:1.25; margin-top:.85rem;}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--gold-light);
  background:rgba(201,164,92,.08);
  border:1px solid var(--border-gold);
  padding:.4rem 1.05rem;
  border-radius:50px;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.eyebrow-center{justify-content:center;}

/* ======================================================
   HERO — cinematic video background
====================================================== */
.hero{
  position:relative;
  overflow:hidden;
  min-height:94vh;
  display:flex;
  align-items:center;
  padding-top:5rem;
  padding-bottom:4rem;
  background:var(--c-black);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  animation:heroZoom 24s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes heroZoom{ from{transform:scale(1);} to{transform:scale(1.07);} }

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(102deg, rgba(3, 3, 3, .95) 0%, rgb(3 3 3 / 45%) 32%, rgb(3 3 3 / 0%) 60%, rgba(3, 3, 3, .14) 100%), linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, transparent 42%);
  z-index:1;
}
.hero-noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045;
  mix-blend-mode:overlay;
  z-index:1;
  pointer-events:none;
}
.hero-sweep{
  position:absolute; top:-25%; left:-35%;
  width:55%; height:150%;
  background:linear-gradient(100deg, transparent 42%, rgba(201,164,92,.09) 50%, transparent 58%);
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
  animation:sweepMove 16s ease-in-out infinite;
}
@keyframes sweepMove{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(240%);}
}
.hero-shape{
  position:absolute;
  right:-8%; bottom:-25%;
  width:52%; height:150%;
  background:transparent;
  opacity:.1;
  clip-path:polygon(58% 0, 100% 0, 100% 100%, 18% 100%);
  z-index:1;
  animation:shapeShift 10s ease-in-out infinite;
}
@keyframes shapeShift{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(-22px);}
}

.hero .container{position:relative; z-index:2;}

.hero-title{
  font-size:clamp(2.2rem, 4.3vw, 3.55rem);
  line-height:1.18;
  margin-top:1.3rem;
  letter-spacing:-.015em;
}
.hero-text{margin-top:1.3rem; font-size:1.04rem; max-width:520px; color:var(--text-muted);}
/* Home hero — desktop: lift the whole text block up */
@media(min-width:992px){
  .hero-copy{margin-top:-5rem;}
}

/* Hero staggered load-in */
.hero-in{opacity:0; transform:translateY(26px);}
.hero.hero-play .hero-in{animation:heroFadeUp .85s var(--ease) forwards;}
.hero.hero-play .hero-in-1{animation-delay:.15s;}
.hero.hero-play .hero-in-2{animation-delay:.38s;}
.hero.hero-play .hero-in-3{animation-delay:.64s;}
.hero.hero-play .hero-in-4{animation-delay:.86s;}
@keyframes heroFadeUp{ to{opacity:1; transform:translateY(0);} }

.scroll-indicator{
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid var(--border-gold); border-radius:20px;
  z-index:2;
}
.scroll-indicator span{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; background:var(--gold); border-radius:50%;
  animation:scrollDot 1.7s infinite;
}
@keyframes scrollDot{
  0%{top:6px; opacity:1;}
  70%{top:24px; opacity:0;}
  100%{top:24px; opacity:0;}
}
@media(max-width:767px){ .hero{min-height:80vh;} }

/* ======================================================
   ABOUT SECTION
====================================================== */
/* background set in SECTION STRUCTURE block above (pure white) */
.about-image-wrap{position:relative;}
.about-image-wrap::before{
  content:'';
  position:absolute; top:-14px; left:-14px;
  width:60px; height:4px;
  /* background:var(--gold); */
  border-radius:4px;
}
.about-image-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:var(--transition);
}
.about-image-frame:hover{box-shadow:0 30px 60px rgba(11,11,11,.16);}
.about-image{
  width:100%;
  height:420px;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.about-image-frame:hover .about-image{transform:scale(1.05);}
.about-badge{
  position:absolute; bottom:-22px; right:-16px;
  background:var(--surface-white);
  border:1px solid var(--border-ink);
  border-radius:var(--radius-md);
  padding:.9rem 1.25rem .9rem 1rem;
  display:flex; align-items:center; gap:.9rem;
  box-shadow:var(--shadow-md);
}
.about-badge-icon{
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%;
  background:var(--gold-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:#100c00;
  box-shadow:0 8px 18px rgba(201,164,92,.4);
}
.about-badge strong{display:flex; align-items:baseline; gap:.15rem; font-size:1.25rem; color:var(--text-ink); line-height:1;}
.about-badge strong .out-of{font-size:.75rem; font-weight:600; color:var(--text-ink-muted);}
.about-badge span{font-size:.72rem; color:var(--text-ink-muted); text-transform:uppercase; letter-spacing:.04em;}

.about-points{list-style:none; padding:0; margin:1.5rem 0;}
.about-points li{display:flex; align-items:center; gap:.6rem; padding:.35rem 0; color:var(--text-ink); font-weight:500;}
.about-points i{color:var(--gold-deep);}

.about-stats{
  display:flex; flex-wrap:wrap;
  margin-top:2rem;
  padding-top:1.75rem;
  border-top:1px solid var(--border-ink);
}
.stat-box{
  flex:1 1 0;
  padding-right:1.5rem;
  border-right:1px solid var(--border-ink);
}
.stat-box:last-child{border-right:none; padding-right:0;}
.stat-box .counter, .stat-box .suffix{
  font-size:2rem; font-weight:800;
  color:var(--gold-deep);
}
.stat-box small{display:block; color:var(--text-ink-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-top:.3rem;}

/* ======================================================
   FEATURES STRIP (Vehicle Protection Categories)
====================================================== */
/* background image set in SECTION STRUCTURE block above (cinematic dark) */
.feature-box{
  background:var(--surface-white);
  border:1px solid var(--border-ink);
  border-radius:var(--radius-md);
  padding:2.1rem 1.35rem;
  text-align:center;
  height:100%;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.feature-box i{
  font-size:1.9rem;
  color:var(--gold-deep);
  margin-bottom:.9rem; display:inline-block;
  transition:var(--transition);
}
.feature-box h6{color:var(--text-ink); font-size:.9rem; font-weight:700; letter-spacing:.005em;}
.feature-box p{color:var(--text-ink-muted); font-size:.79rem; margin-top:.5rem; line-height:1.5;}
.feature-box:hover{
  transform:translateY(-7px);
  border-color:var(--border-gold);
  box-shadow:0 28px 55px rgba(0,0,0,.4);
}
.feature-box{ position:relative; overflow:hidden; }
.feature-box::after{
  content:'';
  position:absolute; top:0; left:-60%;
  width:35%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(201,164,92,.28), transparent);
  transform:skewX(-18deg);
  transition:left .75s var(--ease);
  pointer-events:none;
}
.feature-box:hover::after{left:130%;}
.feature-box:hover i{transform:scale(1.12);}

/* ======================================================
   PRODUCTS (PPF)
====================================================== */
/* background set in SECTION STRUCTURE block above (pure white) */
.product-card{
  position:relative;
  overflow:hidden;
  background:var(--c-ivory);
  border:1px solid var(--border-ink);
  border-radius:28px;
  padding:3rem;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.product-card + .product-card{margin-top:2.5rem;}
.product-card:hover{
  box-shadow:0 30px 60px rgba(11,11,11,.12);
  transform:translateY(-4px);
}
.product-card > .row{position:relative; z-index:1;}
.product-watermark{
  position:absolute;
  top:-1.5rem; right:1.5rem;
  font-family:var(--ff-accent);
  font-style:italic;
  font-weight:600;
  font-size:9rem;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(201,164,92,.25);
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.product-tag{
  display:inline-block;
  color:var(--gold-deep);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.6rem;
}
.products-section h3{font-size:1.95rem; margin-bottom:1rem;}
.products-section p{margin-bottom:1.75rem; max-width:480px;}

.product-specs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.75rem;
  margin-bottom:2rem;
}
.spec-chip{
  display:flex; align-items:center; gap:.55rem;
  background:var(--surface-white);
  border:1px solid var(--border-ink);
  border-radius:12px;
  padding:.7rem .9rem;
  color:var(--text-ink);
  font-size:.86rem;
  font-weight:500;
  transition:var(--transition-fast);
}
.spec-chip i{color:var(--gold-deep); font-size:1rem; flex-shrink:0;}
.spec-chip:hover{border-color:var(--border-gold); background:#fff;}

.product-visual{
  position:relative;
  height:380px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 25px 55px rgba(11,11,11,.18);
}
.product-visual img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.product-visual:hover img{transform:scale(1.06);}
.product-visual-badge{
  position:absolute; top:1.25rem; left:1.25rem;
  z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold-gradient);
  color:#100c00;
  font-weight:700;
  font-size:.8rem;
  padding:.5rem 1rem;
  border-radius:50px;
  box-shadow:0 10px 25px rgba(201,164,92,.4);
}

/* ======================================================
   CERAMIC PRODUCTS
====================================================== */
/* background set in SECTION STRUCTURE block above (charcoal dark) */
.ceramic-card{
  background:var(--surface-white);
  border:1px solid var(--border-ink);
  border-radius:var(--radius-sm);
  height:100%;
  overflow:hidden;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.ceramic-card:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  border-color:var(--border-gold);
}
.ceramic-img{position:relative; height:250px; overflow:hidden;}
.ceramic-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.ceramic-card:hover .ceramic-img img{transform:scale(1.06);}
.ceramic-img::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(8,8,8,.7) 100%);
  opacity:0;
  transition:var(--transition);
}
.ceramic-card:hover .ceramic-img::after{opacity:1;}
.ceramic-icon{
  position:absolute; top:14px; left:14px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(8,8,8,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--gold-light);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:var(--transition);
  z-index:2;
}
.ceramic-card:hover .ceramic-icon{
  transform:scale(1.1);
  background:var(--gold-gradient);
  color:#100c00;
  border-color:transparent;
}
.ceramic-body{padding:1.75rem 1.5rem 1.5rem;}
.ceramic-body h5{color:var(--text-ink); margin-bottom:.65rem;}
.ceramic-body p{color:var(--text-ink-muted); font-size:.91rem;}
.ceramic-arrow{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.9rem;
  font-size:.8rem; font-weight:700;
  color:var(--gold-deep);
  letter-spacing:.02em;
}
.ceramic-arrow i{transition:transform .35s var(--ease);}
.ceramic-card:hover .ceramic-arrow{color:var(--gold);}
.ceramic-card:hover .ceramic-arrow i{transform:translateX(5px);}

/* ======================================================
   PROCESS — connected timeline
====================================================== */
/* background set in SECTION STRUCTURE block above (pure white) */
.process-row{position:relative;}
.process-line{
  position:absolute;
  top:76px; left:12.5%; right:12.5%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(201,164,92,.7) 12%, rgba(201,164,92,.7) 88%, transparent);
  z-index:0;
  display:none;
}
@media(min-width:992px){ .process-line{display:block;} }

.process-step{
  position:relative; z-index:1;
  text-align:center;
  padding:2.25rem 1.25rem;
  background:var(--c-ivory);
  border:1px solid var(--border-ink);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.process-step:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-gold);
  background:var(--c-white);
}
.process-icon{
  position:relative;
  width:80px; height:80px;
  margin:0 auto 1.1rem;
  border-radius:50%;
  background:var(--surface-white);
  border:1px solid var(--border-gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem;
  color:var(--gold-deep);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.step-no{
  position:absolute; top:-4px; right:-4px;
  width:26px; height:26px; border-radius:50%;
  background:var(--c-black);
  color:var(--gold-light);
  font-size:.66rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--c-ivory);
  transition:var(--transition);
}
.process-step:hover .process-icon{
  background:var(--gold-gradient);
  color:#100c00;
  transform:scale(1.08) rotate(-6deg);
  box-shadow:var(--shadow-gold);
}
.process-step:hover .step-no{border-color:var(--surface-white);}
.process-step h6{margin-bottom:.6rem; font-size:1.05rem;}
.process-step p{font-size:.87rem;}

@media(max-width:767px){
  .process-row .col-6{flex:0 0 100%; max-width:100%;}
  .process-row{position:relative; padding-left:6px;}
  .process-row::before{
    content:'';
    position:absolute;
    left:66px; top:12px; bottom:12px; width:1px;
    background:linear-gradient(180deg, transparent, var(--border-gold) 10%, var(--border-gold) 90%, transparent);
    z-index:0;
  }
  .process-step{
    display:flex; align-items:flex-start; gap:1.25rem;
    text-align:left; padding:1.25rem;
  }
  .process-step:hover{transform:none;}
  .process-icon{margin:0; flex-shrink:0;}
}

/* ======================================================
   TESTIMONIALS
====================================================== */
/* background image set in SECTION STRUCTURE block above (cinematic dark) */
.testimonial-card{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);
  padding:2rem;
  height:100%;
  position:relative;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
  transition:var(--transition);
}
.testimonial-card:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--border-gold);
  transform:translateY(-4px);
}
.testimonial-card i.bi-quote{
  font-size:2rem;
  color:var(--gold-light);
  opacity:.8;
  margin-bottom:.35rem;
  display:inline-block;
}
.testimonial-stars{color:var(--gold-light); font-size:.75rem; letter-spacing:.2rem; margin-bottom:.85rem;}
.testimonial-card p{font-style:italic; font-size:.95rem; margin-bottom:1.5rem; color:var(--text-muted); line-height:1.6;}
.testimonial-author{display:flex; align-items:center;}
.testimonial-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--gold-gradient);
  color:#100c00; font-weight:700; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
  margin-right:.75rem;
  flex-shrink:0;
}
.testimonial-card h6{color:var(--text-light); font-size:.95rem; margin:0;}

.carousel-control-prev, .carousel-control-next{width:auto; opacity:1;}
.carousel-btn-icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-gold);
  color:var(--gold-light);
  transition:var(--transition);
}
.carousel-btn-icon:hover{background:var(--gold); color:#100c00;}
.carousel-control-prev{left:-10px;}
.carousel-control-next{right:-10px;}
@media(max-width:991px){ .carousel-control-prev, .carousel-control-next{display:none;} }

.carousel-indicators-custom{
  position:static;
  display:flex; justify-content:center; gap:.5rem; margin-top:2rem;
}
.carousel-indicators-custom button{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.25);
  border:none; padding:0; opacity:1;
  transition:var(--transition);
}
.carousel-indicators-custom button.active{background:var(--gold); width:24px; border-radius:6px;}

/* ======================================================
   FOOTER CTA — clean white band
====================================================== */
.footer-cta{
  position:relative;
  overflow:hidden;
  padding:5rem 0;
  background:var(--c-white);
  border-top:1px solid var(--border-ink);
}
.footer-cta .container{position:relative; z-index:1;}
.footer-cta .eyebrow{
  color:var(--gold-deep);
  background:rgba(201,164,92,.09);
  border-color:rgba(201,164,92,.4);
}
.footer-cta h3{color:var(--text-ink); font-size:1.85rem; margin-bottom:.6rem; line-height:1.3;}
.footer-cta p{color:var(--text-ink-muted); margin:0;}
.footer-cta .btn-gold-outline{
  background:rgba(201,164,92,.08);
  color:var(--gold-deep) !important;
  border-color:rgba(201,164,92,.5);
}
.footer-cta .btn-gold-outline:hover{
  background:var(--gold-gradient);
  color:#100c00 !important;
}
.footer-cta-actions{display:flex; flex-wrap:wrap; gap:1rem;}
@media(min-width:992px){ .footer-cta-actions{justify-content:flex-end;} }

/* ======================================================
   FOOTER
====================================================== */
.site-footer{
  background:var(--c-black-deep);
  padding:5rem 0 0;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity:.5;
  z-index:1;
}
.site-footer .section-blob{opacity:.6;}
.site-footer > .container{position:relative; z-index:2;}
.footer-brand img{height:88px; margin-bottom:1.25rem;}
.footer-about{font-size:.89rem; max-width:340px;}
.footer-social{display:flex; gap:.75rem; margin-top:1.5rem;}
.footer-social a{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.03);
  color:var(--text-light);
  font-size:.95rem;
  transition:var(--transition-fast);
}
.footer-social a:hover{
  background:var(--gold);
  color:#100c00;
  border-color:transparent;
  transform:translateY(-3px);
}

.footer-title{color:var(--gold-light); font-size:1.02rem; margin-bottom:1.5rem; font-weight:700;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:.85rem;}
.footer-links a{color:var(--text-muted); font-size:.91rem;}
.footer-links a:hover{color:var(--gold-light); padding-left:.25rem;}
.footer-contact-list{list-style:none; padding:0; margin:0; font-size:.87rem;}
.footer-contact-list li{display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.85rem; color:var(--text-muted);}
.footer-contact-list i{flex:0 0 auto; margin-top:.2rem; color:var(--gold);}
.footer-contact-list a{color:var(--text-muted);}
.footer-contact-list a:hover{color:var(--gold-light);}

.footer-bottom{
  border-top:1px solid var(--border-soft);
  margin-top:1.5rem;
  padding:1.25rem 0;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem;
}
.footer-bottom p{font-size:.82rem; margin:0; color:var(--text-muted);}
.footer-bottom i{color:var(--gold); font-size:.7rem;}

/* Back to top */
.floating-contact{
  position:fixed; right:2rem; z-index:999;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; box-shadow:0 8px 20px rgba(0,0,0,.24);
  transition:var(--transition);
}
.floating-contact:hover{transform:translateY(-4px);}
.floating-contact:focus-visible,#backToTop:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.whatsapp-float{bottom:2rem; background:#1f9d61; color:#fff; animation:whatsappGlow 2.4s ease-out infinite;}
.whatsapp-float:hover{background:#16834f; color:#fff;}
.call-float{bottom:calc(2rem + 46px + .65rem); background:#172321; border:1px solid var(--gold); color:var(--gold-light); box-shadow:0 8px 20px rgba(0,0,0,.24),0 0 14px rgba(201,164,92,.32); animation:callGlow 2.4s ease-out .8s infinite;}
.call-float:hover{background:var(--gold); color:#100c00;}
@keyframes whatsappGlow{
  0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.24),0 0 0 0 rgba(31,157,97,.48);}
  50%{box-shadow:0 8px 20px rgba(0,0,0,.24),0 0 0 9px rgba(31,157,97,0);}
}
@keyframes callGlow{
  0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.24),0 0 0 0 rgba(201,164,92,.42);}
  50%{box-shadow:0 8px 20px rgba(0,0,0,.24),0 0 0 8px rgba(201,164,92,0);}
}
#backToTop{
  position:fixed; bottom:calc(2rem + 92px + 1.3rem); right:2rem; z-index:999;
  width:46px; height:46px; border-radius:50%;
  background:var(--gold-gradient); color:#100c00;
  border:none; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(201,164,92,.35);
  opacity:0; visibility:hidden; transform:translateY(15px);
  transition:var(--transition);
  cursor:pointer;
}
#backToTop.show{opacity:1; visibility:visible; transform:translateY(0);}
#backToTop:hover{transform:translateY(-4px);}
@media(max-width:575px){
  .floating-contact{right:1rem; width:44px; height:44px;}
  .whatsapp-float{bottom:1rem;}
  .call-float{bottom:calc(1rem + 44px + .6rem);}
  #backToTop{right:1rem; bottom:calc(1rem + 88px + 1.2rem); width:44px; height:44px;}
}

/* ======================================================
   CUSTOM CURSOR DOT (desktop, fine pointer only)
====================================================== */
.cursor-dot{
  position:fixed; top:0; left:0;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  pointer-events:none;
  z-index:10000;
  transform:translate(-50%,-50%);
  transition:width .25s ease, height .25s ease, background-color .25s ease, opacity .25s ease;
  opacity:0;
}
.cursor-dot.is-active{opacity:.85;}
.cursor-dot.is-hovering{
  width:36px; height:36px;
  background:rgba(201,164,92,.28);
  border:1px solid var(--gold);
}
@media (hover:none), (pointer:coarse){
  .cursor-dot{display:none !important;}
}

/* ======================================================
   RESPONSIVE
====================================================== */
@media(max-width:991px){
  section{padding:5rem 0;}
  .navbar-collapse{
    background:var(--surface);
    border-radius:16px;
    padding:1.25rem;
    margin-top:1rem;
    border:1px solid var(--border-soft);
  }
  .navbar-nav .nav-link::after{display:none;}
  .about-image{height:320px;}
  .about-badge{right:auto; left:20px;}
  .product-card{padding:2rem;}
  .product-watermark{font-size:6.5rem; top:-.5rem;}
}
@media(max-width:575px){
  .top-bar-left{gap:.75rem; font-size:.72rem;}
  .stat-box{padding-right:.75rem;}
  .stat-box .counter, .stat-box .suffix{font-size:1.5rem;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .footer-cta-actions, .footer-cta-actions .btn{width:100%;}
  .footer-cta-actions{flex-direction:column;}
  .product-card{padding:1.5rem; border-radius:20px;}
  .product-specs{grid-template-columns:1fr;}
  .product-visual{height:260px;}
}

/* ======================================================
   PAGE BREADCRUMB (inner pages)
====================================================== */
.page-breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  color:var(--text-muted);
  font-size:.8rem; font-weight:600;
  letter-spacing:.03em;
  margin-bottom:1rem;
}
.page-breadcrumb a{color:var(--text-muted);}
.page-breadcrumb a:hover{color:var(--gold-light);}
.page-breadcrumb i{font-size:.65rem; color:var(--gold);}
.page-breadcrumb .current{color:var(--gold-light);}

/* ======================================================
  ARMORA JOURNAL
====================================================== */
.blog-index-page,.blog-detail-page{background:#f3f1ea; color:var(--text-ink);}
.blog-index-page .main-navbar,.blog-detail-page .main-navbar{background:#101817;}
.journal-overline{color:var(--gold-deep); font-size:.7rem; font-weight:800; letter-spacing:.16em;}
.journal-intro{padding:1.2rem 0 2.3rem; background:#101312; color:#f5f2eb;}
.journal-intro .journal-breadcrumb{margin-bottom:1.8rem; color:#aaa99f;}
.journal-list-title{padding-bottom:.5rem;}
.journal-list-title .journal-overline{color:var(--gold-light);}
.journal-list-title h1{margin-top:.35rem; color:#f5f2eb; font-size:clamp(2.5rem,5vw,3.8rem); font-weight:700; line-height:1.1;}
.journal-intro p{max-width:580px; margin-top:.65rem; color:#b8b7af; font-size:.95rem;}
.journal-card-image img{width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease);}
.journal-card-image:hover img{transform:scale(1.035);}
.journal-category{display:inline-flex; align-items:center; gap:.55rem; color:#8a713c; font-size:.67rem; font-weight:800; letter-spacing:.1em;}
.journal-category i,.journal-article-meta i{width:4px; height:4px; border-radius:50%; background:var(--gold-deep);}
.journal-card h3 a:hover{color:var(--gold-deep);}
.journal-read-link{display:inline-flex; align-items:center; gap:.55rem; margin-top:1.35rem; color:#232a25; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;}
.journal-read-link i{color:var(--gold-deep); transition:transform .25s ease;}
.journal-read-link:hover{color:var(--gold-deep);}
.journal-read-link:hover i{transform:translate(3px,-3px);}
.journal-grid-section{padding:2.5rem 0 7rem; background:#fbfaf6;}
.journal-section-heading{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid rgba(23,26,24,.14);}
.journal-section-heading h2{margin-top:.4rem; color:#171a18; font-family:var(--ff-accent); font-size:2.8rem; font-weight:500;}
.journal-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem;}
.journal-listing-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem;}
.journal-card{display:flex; min-width:0; flex-direction:column; overflow:hidden; background:#fff; border:1px solid rgba(23,26,24,.08); border-radius:2px;}
.journal-card-image{display:block; height:225px; overflow:hidden; background:#d8d6ce;}
.journal-card-copy{display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:1.25rem 1.35rem 1.45rem;}
.journal-card h3{margin-top:.7rem; color:#171a18; font-family:var(--ff-accent); font-size:1.65rem; font-weight:500; line-height:1.12;}
.journal-card-copy p{margin-top:.7rem; color:#626861; font-size:.85rem;}
.journal-card-meta{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem; width:100%; margin-top:1rem; padding-top:.7rem; border-top:1px solid rgba(23,26,24,.1); color:#777970; font-size:.68rem;}
.journal-card-copy .journal-read-link{margin-top:1rem;}
.home-journal-section{background:#f3f1ea; color:#171a18;}
.home-journal-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem;}
.home-journal-head h2{margin-top:.45rem; color:#171a18; font-family:var(--ff-accent); font-size:clamp(2.5rem,4vw,3.5rem); font-weight:500;}
.home-journal-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.home-journal-grid .journal-card-image{height:210px;}
.home-journal-grid .journal-card h3{font-size:1.55rem;}
.blog-detail-page .journal-article{padding:1.5rem 0 4rem; background:#f3f1ea;}
.journal-article-container{max-width:1000px;}
.journal-breadcrumb{display:flex; align-items:center; gap:.6rem; max-width:880px; margin:0 auto 1.5rem; color:#72766f; font-size:.76rem; font-weight:600;}
.journal-breadcrumb i{color:var(--gold-deep); font-size:.65rem;}
.journal-breadcrumb a:hover{color:var(--gold-deep);}
.journal-article-header{max-width:880px; margin:0 auto 1.3rem;}
.journal-article-header h1{margin-top:.6rem; color:#171a18; font-family:var(--ff-accent); font-size:clamp(2.6rem,5.6vw,4.6rem); font-weight:500; line-height:1.02;}
.journal-article-dek{max-width:720px; margin-top:.7rem; color:#5d625d; font-size:.96rem;}
.journal-article-meta{display:flex; align-items:center; gap:.65rem; margin-top:.85rem; color:#777970; font-size:.65rem; font-weight:800; letter-spacing:.1em;}
.journal-article-cover{width:100%; max-width:880px; aspect-ratio:2/1; margin:0 auto 1.8rem; overflow:hidden; background:#d8d6ce;}
.journal-article-cover img{width:100%; height:100%; object-fit:cover;}
.journal-article-body{max-width:880px; margin:0 auto;}
.journal-article-body > section{padding:0;}
.journal-article-body section+section{margin-top:1.35rem;}
.journal-article-body h2{margin-bottom:.45rem; color:#171a18; font-family:var(--ff-accent); font-size:1.8rem; font-weight:500;}
.journal-article-body p{max-width:760px; margin-top:.55rem; color:#454b46; font-size:.93rem; line-height:1.7;}
.journal-article-footer{display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:880px; margin:2rem auto 0; padding-top:1.2rem; border-top:1px solid rgba(23,26,24,.15); color:#555b55; font-size:.88rem;}
.journal-not-found{min-height:55vh; padding:7rem 0; background:#f3f1ea;}
.journal-not-found h1{max-width:700px; margin:1rem 0 1.5rem; color:#171a18; font-family:var(--ff-accent); font-size:clamp(3rem,6vw,5rem); font-weight:500;}
@media(max-width:991px){
  .journal-listing-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:767px){
  .journal-intro{padding:1rem 0 1.8rem;}
  .journal-intro .journal-breadcrumb{margin-bottom:1.25rem;}
  .journal-listing-grid{grid-template-columns:1fr;}
  .journal-grid{grid-template-columns:1fr;}
  .home-journal-grid{grid-template-columns:1fr;}
  .home-journal-head,.journal-article-footer{align-items:flex-start; flex-direction:column;}
  .home-journal-grid .journal-card-image{height:240px;}
  .journal-article-header{margin-bottom:1rem;}
  .journal-article-cover{aspect-ratio:1.5/1; margin-bottom:1.5rem;}
  .journal-article-body h2{font-size:1.6rem;}
}

/* ======================================================
  INNER PAGE IDENTITIES
====================================================== */
.about-page .hero{
  min-height:68vh !important;
  background:url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=2000&q=85') center 54%/cover;
}
.about-page .hero-overlay{background:linear-gradient(90deg,rgba(8,8,8,.9),rgba(8,8,8,.52) 54%,rgba(8,8,8,.12));}
.about-page .hero-title{max-width:760px; font-family:var(--ff-accent); font-size:clamp(3rem,6vw,5.5rem); font-weight:500;}
.about-page .about-section{background:#f1eee6;}
.about-page .about-image-frame{border-radius:2px; box-shadow:18px 18px 0 #d8c69f;}
.about-page .about-image{height:510px;}
.about-page .about-badge{border-radius:2px;}
.about-page .timeline-item{padding-bottom:3.5rem;}
.about-page .timeline-year{font-size:2rem;}
.about-page .ceramic-section{background:#17211f;}
.about-page .ceramic-section .ceramic-card{background:#202c29; border-color:rgba(255,255,255,.11);}
.about-page .ceramic-section .ceramic-card h5{color:#f5f0e6;}
.about-page .ceramic-section .ceramic-card p{color:#b8c0b9;}

.services-page .hero{
  min-height:60vh !important;
  background:url('../img/hero-poster.jpg') center 56%/cover;
}
.services-page .hero-overlay{background:linear-gradient(90deg,rgba(5,10,12,.88),rgba(5,10,12,.58) 58%,rgba(5,10,12,.18));}
.services-page .hero-title{max-width:780px; font-size:clamp(2.7rem,5vw,4.6rem);}
.services-page .hero-text{max-width:550px; color:#d0d0c9;}
.services-page .hero-cta{margin-top:1.5rem;}
.services-page .process-section{background:#10191b;}
.services-page .process-section :is(h2,h5){color:#f5f3ed;}
.services-page .process-section p{color:#aab4b4;}
.services-page .process-section .eyebrow{color:#d9bd7c; background:rgba(201,164,92,.1);}
.services-page .steps-alt{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2.5rem; max-width:1000px; margin:2.2rem auto 0; border-top:1px solid rgba(255,255,255,.14);}
.services-page .step-alt-row{align-items:flex-start; min-height:150px; border-color:rgba(255,255,255,.14); padding:1.8rem .5rem;}
.services-page .step-alt-num{width:64px; font-size:2.7rem;}
.services-page .step-alt-row h5{margin:.3rem 0 .45rem; font-size:1.1rem;}
.services-page .step-alt-num{-webkit-text-stroke-color:rgba(201,164,92,.72);}
.services-page .about-section{background:#e8ece9;}
.services-page .warranty-card{padding:2rem 1.5rem; border-radius:3px; border-top:3px solid var(--gold); box-shadow:none;}
.services-page .warranty-card:hover{transform:translateY(-4px);}
.services-page #warranty .row > div:nth-child(2) .warranty-card{background:#17211f; border-color:var(--gold);}
.services-page #warranty .row > div:nth-child(2) .warranty-card h5{color:#f5f2eb;}
.services-page #warranty .row > div:nth-child(2) .warranty-card p{color:#c4c8c2;}
.services-page .ceramic-section{background:#e4e9e5;}
.services-page .ceramic-section :is(h2,h5){color:#17211f;}
.services-page .ceramic-section p{color:#4c5853;}
.services-page .accordion-gold .accordion-item{border-radius:2px;}
@media(max-width:767px){
  .services-page .steps-alt{grid-template-columns:1fr;}
  .services-page .step-alt-row{min-height:0; padding:1.35rem .25rem;}
}

.products-page .hero{
  min-height:72vh !important;
  background:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=2000&q=85') center 57%/cover;
}
.products-page .hero-overlay{background:linear-gradient(90deg,rgba(6,7,7,.93),rgba(6,7,7,.48) 52%,rgba(6,7,7,.08));}
.products-page .hero-title{max-width:780px; font-size:clamp(3rem,6.2vw,5.4rem);}
.products-page .products-section{background:#ecebe5;}
.products-page .section-heading{max-width:780px;}
.products-page .tabs-gold{border-radius:4px; padding:.25rem;}
.products-page .tabs-gold .tab-btn,.products-page .tabs-gold .tab-btn.active{border-radius:2px;}
.products-page .product-card{border-radius:3px; padding:3.5rem; border-top:3px solid #b29658;}
.products-page .product-visual{border-radius:3px;}
.products-page .ceramic-section{background:#18201e;}
.products-page .ceramic-section .section-heading h2{color:#f5f2eb;}
.products-page .ceramic-section .ceramic-card{border-radius:2px;}
.products-page .about-section{background:#f7f6f1;}
.products-page .compare-wrap{border-radius:3px;}

.contact-page .hero{
  min-height:56vh !important;
  background:url('https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=2000&q=85') center 52%/cover;
}
.contact-page .hero-overlay{background:linear-gradient(90deg,rgba(6,12,13,.91),rgba(6,12,13,.58) 55%,rgba(6,12,13,.2));}
.contact-page .hero-title{max-width:700px; font-family:var(--ff-accent); font-size:clamp(3.2rem,6vw,5.2rem); font-weight:500;}
.contact-page .about-section{background:#e9efed;}
.contact-page .about-section > .container > .row:first-child{align-items:stretch;}
.contact-page .about-section > .container > .row:first-child > .col-lg-5{padding:2.25rem; background:#172321; border-radius:3px;}
.contact-page .about-section > .container > .row:first-child > .col-lg-5 > h2{color:#f6f4ed;}
.contact-page .about-section > .container > .row:first-child > .col-lg-5 > h2 .text-gold{color:var(--gold-light);}
.contact-page .about-section > .container > .row:first-child > .col-lg-5 > p{color:#bcc8c5;}
.contact-page .contact-info-item h6{color:#f6f4ed;}
.contact-page .contact-info-item p{color:#bcc8c5;}
.contact-page .contact-info-item a{color:#e7d4a6 !important;}
.contact-page .contact-info-icon{border-radius:4px; box-shadow:none;}
.contact-page .hours-card{background:#172321; border:1px solid rgba(255,255,255,.12); border-radius:3px; padding:1.25rem;}
.contact-page .hours-card h6,.contact-page .hours-row{color:#f3f1e9;}
.contact-page .hours-row{border-color:rgba(255,255,255,.14);}
.contact-page .contact-form-card{border-radius:3px; box-shadow:0 20px 50px rgba(25,45,40,.1);}
.contact-page .contact-form-card .form-control,.contact-page .contact-form-card .form-select{border-radius:3px;}
.contact-page .map-frame{border-radius:3px; box-shadow:none;}
.contact-page .features-strip{background-image:url('https://images.unsplash.com/photo-1511919884226-fd3cad34687c?w=1800&q=80');}

.product-detail-page{background:#0b0d0c; color:var(--text-light);}
.product-detail-page .main-navbar{background:#101817;}
.product-detail-hero{padding:2rem 0 4rem; background:#101312; min-height:calc(100vh - 110px); border-top:1px solid rgba(201,164,92,.14);}
.product-detail-hero > .container{max-width:1320px;}
.detail-breadcrumb{display:flex; align-items:center; gap:.65rem; margin-bottom:2rem; color:#a5a29b; font-size:.8rem; font-weight:600;}
.detail-breadcrumb a:hover{color:var(--gold-deep);}
.detail-breadcrumb i{font-size:.65rem; color:var(--gold-deep);}
.detail-grid{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:center; gap:clamp(2rem,5vw,5rem);}
.detail-copy{padding:1rem 0;}
.detail-category{display:inline-flex; padding:.45rem .75rem; border-left:2px solid var(--gold); background:rgba(201,164,92,.1); color:var(--gold-light); font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;}
.detail-index{margin:1.25rem 0 .4rem; color:#8f928b; font-size:.7rem; font-weight:700; letter-spacing:.16em;}
.detail-copy h1{color:#f5f2eb; font-family:var(--ff-accent); font-size:clamp(3rem,5.5vw,5.2rem); font-weight:500; line-height:.98;}
.detail-description{max-width:540px; margin-top:1.1rem; color:#b8b7af; font-size:.96rem; line-height:1.75;}
.detail-warranty{display:inline-flex; align-items:center; gap:.8rem; margin-top:1.15rem; padding:.7rem .9rem; border:1px solid rgba(201,164,92,.28); background:rgba(255,255,255,.035); color:#f5f2eb;}
.detail-warranty[hidden]{display:none;}
.detail-warranty > i{color:var(--gold-light); font-size:1.25rem;}
.detail-warranty span{display:grid; line-height:1.3;}
.detail-warranty small{color:#a5a29b; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;}
.detail-warranty strong{font-size:.88rem;}
.detail-highlights-title{margin-top:1.7rem; color:#f5f2eb; font-size:.95rem;}
.detail-highlights{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem .9rem; list-style:none; padding:0; margin:.85rem 0 0;}
.detail-highlights li{display:flex; align-items:flex-start; gap:.55rem; color:#d0cec5; font-size:.82rem; line-height:1.5;}
.detail-highlights i{margin-top:.15rem; color:var(--gold-light);}
.detail-actions{display:flex; flex-wrap:wrap; align-items:center; gap:1.15rem; margin-top:1.7rem;}
.detail-range-link{color:#d2c49f; font-size:.82rem; font-weight:700; border-bottom:1px solid rgba(210,196,159,.45); padding-bottom:.2rem;}
.detail-range-link:hover{color:var(--gold-light); border-color:var(--gold-light);}
.detail-visual{position:relative; min-height:430px; height:min(62vh,620px); margin:0; overflow:hidden; background:#15201e; border-left:3px solid var(--gold-deep);}
.detail-visual::after{content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(5,10,9,.72)); pointer-events:none;}
.detail-visual img{width:100%; height:100%; object-fit:cover;}
.detail-visual figcaption{position:absolute; z-index:1; right:1.5rem; bottom:1.4rem; left:1.5rem; display:flex; align-items:end; justify-content:space-between; gap:1rem; color:#fff;}
.detail-visual figcaption span:first-child{font-family:var(--ff-accent); font-size:1.8rem;}
.detail-visual figcaption span:last-child{color:rgba(255,255,255,.75); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;}
.key-features-section{padding:3.5rem 0 2rem; background:#0b0d0c;}
.key-features-heading{max-width:880px; margin-inline:auto; text-align:center; margin-bottom:2rem;}
.key-features-heading h2{margin-top:.65rem; color:#f5f2eb; font-family:var(--ff-accent); font-size:2.2rem; font-weight:500;}
.key-features-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; max-width:1100px; margin-inline:auto;}
.key-feature-card{background:rgba(255,255,255,.04); border:1px solid rgba(201,164,92,.3); border-radius:10px; padding:1.4rem 1.2rem; text-align:center;}
.key-feature-card i{font-size:1.6rem; color:var(--gold-light); margin-bottom:.6rem; display:block;}
.key-feature-card p{color:#f1efe8; font-size:.9rem; margin:0;}
@media(max-width:768px){.key-features-row{grid-template-columns:repeat(2,1fr);}}
.product-specs-section{padding:3.5rem 0 5rem; background:#0b0d0c;}
.product-specs-heading,.detail-specs-wrap{max-width:880px; margin-inline:auto;}
.product-specs-heading{margin-bottom:1.2rem;}
.product-specs-heading h2{margin-top:.65rem; color:#f5f2eb; font-family:var(--ff-accent); font-size:2.2rem; font-weight:500;}
.detail-specs-wrap{border-top:1px solid rgba(201,164,92,.42);}
.detail-specs-table{width:100%; border-collapse:collapse;}
.detail-specs-table th,.detail-specs-table td{padding:1rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.1); text-align:left; vertical-align:top; font-size:.9rem;}
.detail-specs-table thead th{color:var(--gold-light); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;}
.detail-specs-table tbody th{width:34%; color:#b8b7af; font-weight:600;}
.detail-specs-table tbody td{color:#f1efe8;}
.detail-specs-table tbody tr:nth-child(even){background:rgba(255,255,255,.025);}
.ppf-comparison-section{padding:3.5rem 0 5rem; background:#f3f1ea; color:var(--text-ink);}
.ppf-comparison-heading{max-width:880px; margin:0 auto 1.5rem;}
.ppf-comparison-heading h2{margin-top:.7rem; color:#171a18; font-family:var(--ff-accent); font-size:clamp(2rem,4vw,3rem); font-weight:500;}
.product-detail-page .compare-wrap{max-width:1000px; margin:0 auto; border-radius:4px;}
.product-detail-page .compare-table th,.product-detail-page .compare-table td{white-space:normal;}
.product-detail-page .compare-table tbody th{background:#fff;}
.product-detail-page .compare-table tbody td{background:#fff;}
.product-detail-page .compare-table i.bi-check-circle-fill{color:var(--gold-deep);}
.product-detail-page .compare-table i.bi-dash-circle{color:#b8b8b8;}
.product-not-found{min-height:60vh; padding:8rem 0; background:#101312; color:var(--text-light);}
.product-not-found h1{color:#f5f2eb; font-family:var(--ff-accent); font-weight:500; font-size:clamp(2.4rem,5vw,4rem);}
.product-not-found p{color:#b8b7af;}
.product-detail-page .footer-cta{background:#171b19; border-color:rgba(255,255,255,.1);}
.product-detail-page .footer-cta h3{color:#f5f2eb;}
.product-detail-page .footer-cta p{color:#b8b7af;}
.product-detail-page .footer-cta .eyebrow{color:var(--gold-light); background:rgba(201,164,92,.08); border-color:var(--border-gold);}
.product-detail-page .footer-cta .btn-gold-outline{color:var(--gold-light) !important;}
@media(max-width:767px){
  .detail-grid{grid-template-columns:1fr; gap:2.5rem;}
  .detail-copy{order:0; padding:.2rem 0;}
  .detail-visual{order:1; height:42vh; min-height:280px;}
  .detail-breadcrumb{margin-bottom:1.4rem;}
}
@media(max-width:575px){
  .product-detail-hero{padding:1.25rem 0 3rem;}
  .detail-visual{height:36vh; min-height:240px;}
  .detail-copy h1{font-size:3.15rem;}
  .detail-highlights{grid-template-columns:1fr;}
  .detail-actions{align-items:flex-start; flex-direction:column;}
  .product-specs-section{padding:2.5rem 0 3.5rem;}
  .ppf-comparison-section{padding:2.5rem 0 3.5rem;}
  .detail-specs-table th,.detail-specs-table td{padding:.8rem .65rem; font-size:.82rem;}
  .detail-specs-table tbody th{width:40%;}
}

@media(max-width:767px){
  .about-page .hero,.services-page .hero,.products-page .hero,.contact-page .hero{min-height:62vh !important;}
  .about-page .about-image{height:340px;}
  .about-page .about-image-frame{box-shadow:10px 10px 0 #d8c69f;}
  .products-page .product-card{padding:1.5rem;}
  .products-page .products-section{padding-top:7rem;}
}

/* ======================================================
   TIMELINE (About — milestones)
====================================================== */
.timeline{position:relative; max-width:900px; margin:0 auto;}
.timeline::before{
  content:'';
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--border-gold) 8%, var(--border-gold) 92%, transparent);
  transform:translateX(-50%);
}
.timeline-item{
  position:relative;
  width:50%;
  padding:0 3rem 3rem;
}
.timeline-item:nth-child(odd){left:0; text-align:right;}
.timeline-item:nth-child(even){left:50%; text-align:left;}
.timeline-dot{
  position:absolute; top:0;
  width:16px; height:16px; border-radius:50%;
  background:var(--gold-gradient);
  box-shadow:0 0 0 5px rgba(201,164,92,.15);
}
.timeline-item:nth-child(odd) .timeline-dot{right:-8px;}
.timeline-item:nth-child(even) .timeline-dot{left:-8px;}
.timeline-year{
  font-family:var(--ff-accent); font-style:italic; font-weight:600;
  font-size:1.6rem; color:var(--gold-deep); line-height:1;
}
.timeline-item h5{color:var(--text-ink); margin:.5rem 0 .4rem;}
.timeline-item p{color:var(--text-ink-muted); font-size:.89rem; margin:0;}
@media(max-width:767px){
  .timeline::before{left:18px;}
  .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even){
    width:100%; left:0; text-align:left; padding:0 0 2.5rem 3rem;
  }
  .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot{left:11px; right:auto;}
}

/* Values cards — 2-up on mobile, keep long headings inside the card */
@media(max-width:767px){
  .value-card h5{font-size:1rem; white-space:nowrap;}
  .value-card{overflow:hidden;}
}

/* ======================================================
   TAB SWITCHER (Products page)
====================================================== */
.tabs-gold{
  display:inline-flex; gap:.4rem;
  background:var(--c-ivory);
  border:1px solid var(--border-ink);
  border-radius:50px;
  padding:.35rem;
  margin:0 auto 3rem;
}
.tabs-gold .tab-btn{
  border:none; background:transparent;
  padding:.6rem 1.6rem;
  border-radius:50px;
  font-weight:700; font-size:.82rem;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--text-ink-muted);
  transition:var(--transition-fast);
  cursor:pointer;
}
.tabs-gold .tab-btn.active{
  background:var(--gold-gradient);
  color:#100c00;
  box-shadow:0 8px 18px rgba(201,164,92,.3);
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ======================================================
   COMPARISON TABLE (Products page)
====================================================== */
.compare-wrap{overflow-x:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border-ink);}
.compare-table{width:100%; border-collapse:collapse; min-width:640px; background:var(--c-white);}
.compare-table th, .compare-table td{
  padding:1.1rem 1.4rem;
  text-align:center;
  border-bottom:1px solid var(--border-ink);
  font-size:.88rem;
  color:var(--text-ink-muted);
}
.compare-table th:first-child, .compare-table td:first-child{text-align:left; color:var(--text-ink); font-weight:600;}
.compare-table thead th{
  background:var(--c-ivory);
  color:var(--text-ink);
  font-weight:800;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.compare-table thead th.highlight{color:var(--gold-deep);}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table i.bi-check-circle-fill{color:var(--gold-deep); font-size:1.1rem;}
.compare-table i.bi-dash-circle{color:#ccc; font-size:1.1rem;}
.products-page #tab-ppf .product-card,
.products-page #tab-ceramic [id]{scroll-margin-top:120px;}

/* ======================================================
   ALTERNATING PROCESS STEPS (Services page)
====================================================== */
.steps-alt{max-width:820px; margin:0 auto;}
.step-alt-row{
  display:flex; align-items:center; gap:2rem;
  padding:2rem 0;
  border-bottom:1px solid var(--border-ink);
}
.step-alt-row:last-child{border-bottom:none;}
.step-alt-num{
  font-family:var(--ff-accent); font-style:italic; font-weight:600;
  font-size:3.2rem; color:transparent;
  -webkit-text-stroke:1.5px rgba(201,164,92,.5);
  flex-shrink:0; width:90px; text-align:center;
}
.step-alt-row h5{color:var(--text-ink); margin-bottom:.4rem;}
.step-alt-row p{color:var(--text-ink-muted); font-size:.9rem; margin:0;}
@media(max-width:575px){
  .step-alt-row{gap:1.1rem;}
  .step-alt-num{font-size:2.2rem; width:55px;}
}

/* ======================================================
   ACCORDION GOLD (Services — warranty FAQ)
====================================================== */
.accordion-gold .accordion-item{
  background:var(--c-ivory);
  border:1px solid var(--border-ink);
  border-radius:var(--radius-md) !important;
  margin-bottom:1rem;
  overflow:hidden;
}
.accordion-gold .accordion-button{
  background:transparent;
  color:var(--text-ink);
  font-weight:700;
  font-size:.98rem;
  padding:1.25rem 1.5rem;
  box-shadow:none !important;
}
.accordion-gold .accordion-button:not(.collapsed){
  color:var(--gold-deep);
  background:rgba(201,164,92,.07);
}
.accordion-gold .accordion-button::after{
  filter:sepia(1) saturate(4) hue-rotate(5deg) brightness(.9);
}
.accordion-gold .accordion-body{
  color:var(--text-ink-muted);
  font-size:.9rem;
  padding:0 1.5rem 1.5rem;
}

/* ======================================================
   OFFICE HOURS / WHY-CHOOSE STRIP (Contact page)
====================================================== */
.hours-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:1.75rem;
}
.hours-card h6{color:var(--gold-light); margin-bottom:1rem; font-size:.95rem;}
.hours-row{display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--border-soft); font-size:.86rem;}
.hours-row:last-child{border-bottom:none;}
.hours-row span:first-child{color:var(--text-light); font-weight:500;}
.hours-row span:last-child{color:var(--gold-light); font-weight:600;}

.why-strip{display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.5rem;}
.why-chip{
  flex:1 1 200px;
  display:flex; align-items:center; gap:.85rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);
  padding:1.1rem 1.25rem;
}
.why-chip i{font-size:1.4rem; color:var(--gold);}
.why-chip span{font-size:.85rem; font-weight:600; color:var(--text-light);}
