/* static/css/styles.css (FULL FILE) */

:root{
  --ink:#111315;
  --muted:#6c757d;
  --panel:#ffffff;
  --panel2:#f6f7f9;
  --line: rgba(17,19,21,.10);

  /* Twin accent for icon polish */
  --accent:#0A9969;
  --accentSoft: rgba(10,153,105,.14);
  --accentRing: rgba(10,153,105,.18);
}

html { scroll-padding-top: 84px; }
body { color: var(--ink); }

/* ============================
   NAVBAR
   ============================ */

#topNav.navbar{
  background: #111315 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

#topNav .navbar-brand{ letter-spacing: .2px; }

#topNav .navbar-brand .text-secondary{
  color: rgba(255,255,255,.60) !important;
}

/* Restore normal nav-link styling (no pills) */
#topNav .nav-link{
  color: rgba(255,255,255,.72) !important;
  padding: .75rem .9rem;
  border-radius: 0;
  background: transparent !important;
  position: relative;
}

#topNav .nav-link:hover{ color: rgba(255,255,255,.95) !important; }

/* Active state underline */
#topNav .nav-link.active{ color: #fff !important; }

#topNav .nav-link.active::after{
  content:"";
  position:absolute;
  left: .9rem;
  right: .9rem;
  bottom: .35rem;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.85);
}

#topNav .navbar-toggler{ border-color: rgba(255,255,255,.18); }

#topNav .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.12);
}

@media (min-width: 992px){
  #topNav .navbar-nav{ gap: .1rem; }
}

/* Branding images */
.brand-logo{
  width:auto;
  display:inline-block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
}

.client-logo{
  height: 34px;
  width: auto;
  border-radius: 12px;
  background: #fff;
  padding: 6px 10px;
  border: 1px solid rgba(17,19,21,.10);
}

/* ============================
   HERO
   ============================ */

.hero{
  background:
    radial-gradient(1200px 500px at 10% 20%, rgba(17,19,21,.08), transparent 60%),
    radial-gradient(900px 400px at 90% 30%, rgba(17,19,21,.06), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border-bottom: 1px solid var(--line);
}

.hero-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.hero-media{
  background: linear-gradient(135deg, #f2f4f7, #ffffff);
}

.hero-card .hero-media.placeholder-bg,
.media.placeholder-bg{
  background: linear-gradient(135deg, #e9ecef, #f8f9fa);
}

.hero-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon colour consistency (non-checklist icons) */
.hero i.bi,
.callout i.bi,
.pill i.bi,
.twin-acc-icon i.bi,
.icon-bubble i.bi,
.twin-feature-ico i.bi,
.twin-spec-k i.bi{
  color: var(--accent);
  opacity: .96;
}

/* ============================
   Pills / TOC
   ============================ */

.pill{
  font-size: .75rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
}

.toc-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.toc-link{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}

.toc-link:hover{ background: #f7f7f8; }

/* ============================
   Sections / Cards
   ============================ */

.section{ padding: 72px 0; }

.section-alt{
  background: var(--panel2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head{ max-width: 920px; }

.soft-card{
  border: 1px solid var(--line);
  border-radius: 18px;
}

.icon-bubble,
.journey-icon,
.stack-icon{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1.2rem;
}

/* Accent ring for icon bubbles */
.icon-bubble{
  box-shadow: 0 0 0 3px rgba(10,153,105,.08);
}

.stack-card{
  display:block;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}

.stack-card:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

.callout{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 16px;
}

/* ============================
   MEDIA
   ============================ */

.media{
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media.contain{
  background: linear-gradient(135deg, #f2f4f7, #ffffff);
}

.media.contain img{
  object-fit: contain;
  padding: 18px;
}

.media.contain img.tall{ padding: 24px; }

/* ============================
   CAROUSEL
   ============================ */

.twin-carousel{
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.twin-carousel .carousel-inner{
  background: linear-gradient(135deg, #f2f4f7, #ffffff);
}

/* clickable frame for lightbox */
.twin-carousel-frame{
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  line-height: 0;
}

.twin-carousel-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 18px;
}

/* Controls */
.twin-carousel .carousel-control-prev,
.twin-carousel .carousel-control-next{
  width: 12%;
  opacity: 1;
  z-index: 10;
}

.twin-carousel .carousel-control-prev-icon,
.twin-carousel .carousel-control-next-icon{
  background-image: none !important;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,19,21,.18);
  box-shadow: 0 10px 22px rgba(17,19,21,.12);
  position: relative;
}

.twin-carousel .carousel-control-prev-icon::before,
.twin-carousel .carousel-control-next-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 3px solid #111315;
  border-right: 3px solid #111315;
  transform: rotate(225deg);
}

.twin-carousel .carousel-control-next-icon::before{ transform: rotate(45deg); }

.twin-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.twin-carousel .carousel-control-next:hover .carousel-control-next-icon{
  background: #fff;
}

/* Indicators */
.twin-carousel .carousel-indicators{ margin-bottom: .75rem; }
.twin-carousel .carousel-indicators [data-bs-target]{ background-color: rgba(17,19,21,.35); }
.twin-carousel .carousel-indicators .active{ background-color: rgba(17,19,21,.70); }

/* ============================
   PRODUCTS PAGE ONLY
   ============================ */

#productsPage .twin-carousel-frame{
  aspect-ratio: auto;
  height: clamp(420px, 46vw, 680px);
}

#productsPage .twin-carousel-img{
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 10px;
}

@media (max-width: 576px){
  #productsPage .twin-carousel-frame{ height: 380px; }
  #productsPage .twin-carousel-img{ padding: 10px; }
}

@media (min-width: 992px){
  #productsPage .twin-carousel-frame{ height: 680px; }
}

.twin-product-gallery-shell{ position: relative; }

.twin-zoom-hint{
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,19,21,.18);
  box-shadow: 0 10px 22px rgba(17,19,21,.12);
  font-weight: 700;
  color: #111315;
  font-size: .85rem;
  pointer-events: none;
  opacity: .95;
}

/* ============================
   GALLERY GRID
   ============================ */

.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.gallery-item{
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  padding: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease;
  aspect-ratio: 4 / 3;
  display: block;
  line-height: 0;
}

.gallery-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17,19,21,.08);
}

.gallery-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gallery-contain .gallery-item{
  background: linear-gradient(135deg, #f2f4f7, #ffffff);
}

.gallery-contain .gallery-item img{
  object-fit: contain;
  padding: 12px;
}

@media (max-width: 420px){
  .gallery{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ============================
   LIGHTBOX
   ============================ */

.lightbox .modal-body{ padding: 0; }

.lightbox-stage{
  width: 100%;
  height: min(74vh, 820px);
  background: #0b0d10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightboxImg{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================
   PRINT
   ============================ */

@media print {
  nav, .btn, .toc-card, .gallery, .modal, .twin-carousel { display:none !important; }
  .section { padding: 28px 0; }
  .section-alt { background: #fff; border: 0; }
  .soft-card, .callout, .hero-card { break-inside: avoid; }
}

/* ============================
   PRODUCT CATALOGUE CARDS
   ============================ */

.twin-product-card{
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.twin-product-card .soft-card{
  transition: transform .12s ease, box-shadow .12s ease;
}

.twin-product-card:hover .soft-card{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17,19,21,.08);
}

.twin-thumb-wrap{
  background: linear-gradient(135deg, #f2f4f7, #ffffff);
}

.twin-thumb-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;
}

.twin-thumb-click{ position: relative; }
.twin-thumb-click, .twin-product-card{ cursor: pointer; }

.twin-thumb-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  opacity: 0;
  transition: opacity .12s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35));
}

.twin-thumb-overlay-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(17,19,21,.18);
  box-shadow: 0 10px 22px rgba(17,19,21,.12);
  font-weight: 700;
  color: #111315;
  font-size: .9rem;
}

.twin-product-card:hover .twin-thumb-overlay{ opacity: 1; }

.twin-tagline{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
}

/* ============================
   PRODUCT PAGE CLEANUP
   ============================ */

.twin-sticky{
  position: sticky;
  top: 92px;
}

/* Accordion styling */
.twin-accordion .accordion-item{
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.twin-accordion .accordion-button{
  background: #fff;
  box-shadow: none;
  font-weight: 800;
  color: var(--ink);
}

.twin-accordion .accordion-button:not(.collapsed){
  background: #fff;
  color: var(--ink);
}

.twin-accordion .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(17,19,21,.08);
}

.twin-acc-icon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(10,153,105,.08);
}

.twin-acc-icon i{
  font-size: 1.05rem;
  color: var(--accent);
}

/* Two-column layout (no bullets by itself) */
.twin-two-col{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 18px;
}

@media (min-width: 768px){
  .twin-two-col{ grid-template-columns: 1fr 1fr; }
}

/* ============================
   ✅ UNIFORM CHECKLIST (THE FIX)
   ============================ */

.twin-checklist{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.twin-checklist li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  line-height: 1.35;
  color: rgba(17,19,21,.72);
}

.twin-checklist li i.bi{
  flex: 0 0 auto;
  margin-top: .15rem;
  font-size: 1.05rem;
  color: var(--accent) !important;
  opacity: .96;
}

/* When two-col + checklist is used, keep layout but remove any bullet leftovers */
.twin-two-col.twin-checklist li{
  padding-left: 0 !important;
}

.twin-two-col.twin-checklist li::before{
  content: none !important;
}

/* ============================
   Specs
   ============================ */

.twin-spec-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 14px;
}

@media (min-width: 768px){
  .twin-spec-grid{ grid-template-columns: 1fr 1fr; }
}

.twin-spec{
  padding-top: 10px;
  border-top: 1px solid rgba(17,19,21,.10);
}

.twin-spec:nth-child(1),
.twin-spec:nth-child(2){
  border-top: none;
  padding-top: 0;
}

.twin-spec-k{
  font-size: .78rem;
  color: rgba(17,19,21,.55);
  margin-bottom: 2px;
  letter-spacing: .12px;
}

.twin-spec-v{
  font-weight: 500;
}

/* ============================
   Key features sub-blocks
   ============================ */

.twin-feature-blocks{
  display: grid;
  gap: 14px;
}

.twin-feature-block{
  border-top: 1px solid rgba(17,19,21,.10);
  padding-top: 14px;
}

.twin-feature-block:first-child{
  border-top: none;
  padding-top: 0;
}

.twin-feature-block-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--ink);
}

.twin-feature-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(17,19,21,.10);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(10,153,105,.08);
}

.twin-feature-ico i{
  font-size: 1.02rem;
}
/* ============================
   Key features: panel separation
   ============================ */

.twin-feature-panels{
  display: grid;
  gap: 14px;
}

.twin-feature-panel{
  border: 1px solid rgba(17,19,21,.10);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.twin-feature-panel-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* ============================
   INDEX: "SCROLL FOR PRODUCTS" CUE + BELOW-FOLD MARKER
   ============================ */

/* Wrap so it sits nicely under the TOC in the hero */
.scroll-cue-wrap{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* Big obvious CTA that signals content continues */
.scroll-cue{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(17,19,21,.10);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .1px;
}

.scroll-cue:hover{
  background: #fff;
  transform: translateY(-1px);
  transition: transform .12s ease, background .12s ease;
}

.scroll-cue-text{
  color: rgba(17,19,21,.75);
  font-weight: 700;
}

/* animated double-down */
.scroll-cue i{
  color: var(--accent);
  font-size: 1.05rem;
  opacity: .95;
  animation: twinScrollBounce 1.25s ease-in-out infinite;
}

@keyframes twinScrollBounce{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* A slim marker band between hero and sections */
.below-fold-marker{
  background: transparent;
  padding: 0;
  margin: 0;
}

.below-fold-line{
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* faint line */
.below-fold-line::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(17,19,21,.10);
  transform: translateY(-50%);
}

/* the pill label on the line */
.below-fold-pill{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17,19,21,.10);
  box-shadow: 0 8px 18px rgba(17,19,21,.08);
  font-size: .85rem;
  font-weight: 800;
  color: rgba(17,19,21,.72);
}

.below-fold-pill i{
  color: var(--accent);
  opacity: .95;
}

/* Mobile: keep cue from feeling huge */
@media (max-width: 576px){
  .scroll-cue{
    width: 100%;
    justify-content: center;
  }
  .scroll-cue-wrap{
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue i{ animation: none !important; }
  .scroll-cue:hover{ transform: none !important; transition: none !important; }
}

.hero{
  padding-bottom: 10px; /* small breathing space for scroll cue */
}