/* ═══════════════════════════════════════════════
   TRITON — ICP Testing Page Styles
   Global design system: ../global.css
   ═══════════════════════════════════════════════ */

/* Font Awesome icon sizes (page-specific) */
.el-group i{font-size:1.3rem;color:var(--aq)}
.el-group-danger i{color:#ff7070}
.el-group-nutrient i{color:#7aeba0}
.step-icon i{font-size:1.3rem;color:var(--aq)}
.reading-feat i{font-size:1.1rem;color:var(--aq)}


/* ════════════════════════════════════════════════
   HERO — Product image background + foreground kit
   ════════════════════════════════════════════════ */
.icp-hero{display:flex;align-items:stretch}
.icp-hero .hero-bg{position:absolute;inset:0;background:url('../../media/images/backgrounds/icp-hero-coral-tank.jpg') center/cover no-repeat}
.icp-hero .hero-bg::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(3,47,79,.55);mix-blend-mode:multiply}
.icp-hero .hero-bg::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(1,24,39,.6) 0%,rgba(1,24,39,.2) 30%,rgba(1,24,39,.25) 55%,rgba(1,24,39,.96) 100%)}
.icp-hero .hero-ct{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:clamp(2rem,4vw,5rem)}
.icp-hero .hero-text{min-width:0;align-self:end}
.hero-product{position:relative;z-index:2;align-self:center;justify-self:center}
.hero-product img{max-height:65vh;width:auto;object-fit:contain;filter:drop-shadow(0 20px 60px rgba(0,0,0,.5))}
.hero-t{font-size:clamp(2.6rem,5.5vw,4.5rem);max-width:22ch}


/* ════════════════════════════════════════════════
   BRIDGE — Problem Awareness Comparison
   ════════════════════════════════════════════════ */
.bridge{background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.6) 100%)}
.bridge-body{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.8;color:rgba(255,255,255,.75);margin-bottom:1.8rem}
.bridge-body strong{color:var(--aq);font-weight:700}
.bridge-highlight{padding:1.5rem 2rem;background:rgba(0,100,102,.15);border-left:3px solid var(--aq);margin-top:2rem}
.bridge-highlight p{font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.85)}
.bridge-highlight strong{color:var(--aq)}

.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;margin-top:2.5rem}
.compare-card{padding:2rem 1.8rem;background:rgba(1,24,39,.6);border:1px solid rgba(133,255,199,.1);text-align:center;transition:all .4s}
.compare-card h4{font-family:var(--h);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:1.2rem}
.compare-n{font-family:var(--h);font-weight:900;font-size:clamp(3rem,5vw,4.5rem);line-height:.9;margin-bottom:.3rem}
.compare-card > p{font-size:.85rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:1.5rem}
.compare-home{opacity:.55}
.compare-home .compare-n{color:rgba(255,255,255,.35)}
.compare-icp{border-color:rgba(133,255,199,.3);background:rgba(0,100,102,.12)}
.compare-icp .compare-n{color:var(--aq)}
.compare-vs{display:flex;align-items:center;justify-content:center;padding:0 .5rem}
.compare-vs span{font-family:var(--h);font-weight:900;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(133,255,199,.35)}


/* ════════════════════════════════════════════════
   ELEMENTS — 5 Group Breakdown (45 elements)
   ════════════════════════════════════════════════ */
.elements{background:var(--mr);position:relative;overflow:hidden}
.elements::before{content:'';position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 1l27 15.5v31L28 63 1 47.5v-31z' fill='none' stroke='%2385FFC7' stroke-width='.6'/%3E%3C/svg%3E");background-size:56px 97px}
.elements>*{position:relative;z-index:1}

/* 6-column grid: row 1 = 3 cards, row 2 = 2 cards centered */
.el-groups{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;margin-top:clamp(3rem,6vw,4.5rem)}
.el-group:nth-child(1){grid-column:1/3}
.el-group:nth-child(2){grid-column:3/5}
.el-group:nth-child(3){grid-column:5/7}
.el-group:nth-child(4){grid-column:2/4}
.el-group:nth-child(5){grid-column:4/6}

.el-group{padding:clamp(2rem,3vw,2.8rem);background:rgba(1,24,39,.5);border:1px solid rgba(133,255,199,.1);transition:all .4s;display:flex;flex-direction:column}
.el-group:hover{border-color:rgba(133,255,199,.3);transform:translateY(-4px)}
.el-group .icon-box{margin-bottom:1.5rem}
.el-group h3{font-family:var(--h);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.8rem;line-height:1.3}
.el-group p{font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.72);margin-bottom:1.5rem;flex:1}

.el-symbols{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.el-sym{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(133,255,199,.06);border:1px solid rgba(133,255,199,.12);font-family:var(--h);font-weight:900;font-size:.88rem;color:var(--aq);transition:all .3s}
.el-sym:hover{background:rgba(133,255,199,.15);border-color:rgba(133,255,199,.35);transform:scale(1.1)}
.el-sym-danger{background:rgba(255,80,80,.05);border-color:rgba(255,80,80,.15);color:#ff9090}
.el-sym-danger:hover{background:rgba(255,80,80,.12);border-color:rgba(255,80,80,.35)}
.el-sym-nutrient{background:rgba(122,235,160,.06);border-color:rgba(122,235,160,.15);color:#7aeba0}
.el-sym-nutrient:hover{background:rgba(122,235,160,.12);border-color:rgba(122,235,160,.35)}
.el-sym-other{background:rgba(133,200,255,.06);border-color:rgba(133,200,255,.15);color:#85c8ff;width:auto;padding:0 1rem}
.el-sym-other:hover{background:rgba(133,200,255,.12);border-color:rgba(133,200,255,.35)}

.el-group-danger{border-color:rgba(255,80,80,.12)}
.el-group-danger:hover{border-color:rgba(255,80,80,.3)}
.el-group-danger .icon-box{background:rgba(255,80,80,.06);border-color:rgba(255,80,80,.15)}
.el-group-danger .el-sym{width:40px;height:40px;font-size:.82rem}

.el-group-nutrient{border-color:rgba(122,235,160,.12)}
.el-group-nutrient:hover{border-color:rgba(122,235,160,.3)}
.el-group-nutrient .icon-box{background:rgba(122,235,160,.06);border-color:rgba(122,235,160,.15)}


/* ════════════════════════════════════════════════
   PROCESS — How It Works (4 Steps)
   ════════════════════════════════════════════════ */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid rgba(133,255,199,.1);border-bottom:2px solid rgba(133,255,199,.1);margin-top:clamp(3rem,6vw,4.5rem)}
.step{padding:clamp(2.5rem,4vw,3.5rem) 2rem;border-right:1px solid rgba(133,255,199,.06);position:relative;transition:background .3s}
.step:last-child{border-right:none}
.step:hover{background:rgba(0,100,102,.08)}
.step-n{font-family:var(--h);font-weight:900;font-size:5rem;color:var(--aq);opacity:.1;line-height:.8;margin-bottom:1.2rem;letter-spacing:-.03em}
.step .icon-box{margin-bottom:1.2rem}
.step h3{font-family:var(--h);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}
.step p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.68)}


/* ════════════════════════════════════════════════
   READING — Understanding Your Results
   ════════════════════════════════════════════════ */
.reading{background:linear-gradient(135deg,var(--bp) 0%,rgba(0,100,102,.18) 100%);position:relative;overflow:hidden}
.reading-body{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.8;color:rgba(255,255,255,.75);margin:1.5rem 0 2rem}
.reading-body strong{color:var(--aq)}

.reading-features{display:grid;gap:.8rem;margin-top:2rem}
.reading-feat{display:flex;align-items:flex-start;gap:1.2rem;padding:1.2rem 1.5rem;background:rgba(1,24,39,.4);border:1px solid rgba(133,255,199,.08);transition:all .3s}
.reading-feat:hover{border-color:rgba(133,255,199,.2);transform:translateX(4px)}
.reading-feat .icon-circle{flex-shrink:0;width:44px;height:44px}
.reading-feat .icon-circle i{font-size:1.1rem}
.reading-feat h4{font-family:var(--h);font-weight:900;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.reading-feat p{font-size:1rem;line-height:1.55;color:rgba(255,255,255,.65)}

.reading-visual{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}
.reading-visual::before{content:'';position:absolute;width:80%;height:80%;background:radial-gradient(circle,rgba(133,255,199,.08) 0%,transparent 70%);filter:blur(50px)}
.reading-mock{width:100%;background:rgba(1,24,39,.7);border:1px solid rgba(133,255,199,.15);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);position:relative;z-index:1}
.reading-mock-head{padding:1.2rem 1.5rem;border-bottom:1px solid rgba(133,255,199,.08);display:flex;align-items:center;justify-content:space-between}
.reading-mock-head h4{font-family:var(--h);font-weight:900;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.reading-mock-badge{font-family:var(--h);font-weight:900;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bp);background:var(--aq);padding:.3em .8em;}
.reading-mock-body{padding:1.5rem}
.rm-row{display:grid;grid-template-columns:1fr 60px 80px;gap:.5rem;align-items:center;padding:.6rem 0;border-bottom:1px solid rgba(133,255,199,.04)}
.rm-row:last-child{border-bottom:none}
.rm-name{font-size:.9rem;color:rgba(255,255,255,.65);font-weight:600}
.rm-bar-wrap{height:6px;background:rgba(255,255,255,.06);overflow:hidden}
.rm-bar{height:100%;background:var(--aq);width:var(--bw,50%)}
.rm-bar.warn{background:#ffd47a}
.rm-val{font-family:var(--h);font-weight:900;font-size:.85rem;color:var(--aq);text-align:right}
.rm-val.warn{color:#ffd47a}
.reading-sample-link{color:var(--aq);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.reading-sample-link i{font-size:.75em;margin-left:.25em}

/* Screenshot replacing mock */
.reading-screenshot-main{width:100%;filter:drop-shadow(0 20px 60px rgba(0,0,0,.6));position:relative;z-index:1}

/* Showcase gallery — result capabilities */
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:clamp(3rem,6vw,4.5rem)}
.showcase-item{overflow:hidden;background:rgba(1,24,39,.5);border:1px solid rgba(133,255,199,.1);transition:all .4s}
.showcase-item:hover{border-color:rgba(133,255,199,.25);transform:translateY(-4px)}
.showcase-item img{width:100%;height:auto;display:block}
.showcase-item h4{font-family:var(--h);font-weight:900;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;padding:1.5rem 1.5rem .4rem;color:var(--aq)}
.showcase-item p{font-size:1rem;line-height:1.55;color:rgba(255,255,255,.65);padding:0 1.5rem 1.5rem}


/* ════════════════════════════════════════════════
   PROCESS APP REGISTRATION FEATURE
   ════════════════════════════════════════════════ */
.process-app{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center;margin-top:clamp(3rem,6vw,5rem);border-top:2px solid rgba(133,255,199,.1);padding-top:clamp(3rem,6vw,5rem)}
.process-app-h{font-family:var(--h);font-weight:900;font-size:clamp(1.8rem,3vw,2.6rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;margin-bottom:1rem}
.process-reg-steps{list-style:none;counter-reset:reg-step;padding:0;display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.8rem}
.process-reg-steps li{counter-increment:reg-step;position:relative;padding-left:3rem;font-size:1rem;line-height:1.65;color:rgba(255,255,255,.78)}
.process-reg-steps li::before{content:counter(reg-step,decimal-leading-zero);font-family:var(--h);font-weight:900;font-size:.82rem;color:var(--aq);letter-spacing:.05em;position:absolute;left:0;top:.2em}
.process-reg-steps a{color:var(--aq);text-decoration:underline;text-underline-offset:3px}
.process-tips{background:rgba(0,100,102,.15);border-left:2px solid rgba(133,255,199,.4);border-radius:0 6px 6px 0;padding:1.1rem 1.4rem;margin-bottom:2rem}
.process-tips-label{font-family:var(--h);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--aq);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.process-tips-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.55rem}
.process-tips-list li{font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.6);padding-left:1.2em;position:relative}
.process-tips-list li::before{content:'–';position:absolute;left:0;color:var(--aq);opacity:.7}
.process-app-visual{display:flex;justify-content:center;align-items:center}
.process-app-visual img{max-width:460px;width:100%;height:auto;filter:drop-shadow(0 30px 80px rgba(0,0,0,.55))}


/* ════════════════════════════════════════════════
   VIDEO SECTION — right-aligned layout
   ════════════════════════════════════════════════ */
.icp-video .video-wrap{margin-left:auto;margin-right:0}

/* ════════════════════════════════════════════════
   N-DOC TEASER
   ════════════════════════════════════════════════ */
.ndoc-t{background:var(--bp);position:relative;overflow:hidden}
.ndoc-t::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 55% at 30% 50%,rgba(0,100,102,.15) 0%,transparent 70%)}
.ndoc-t>*{position:relative;z-index:1}
.ndoc-t-body{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.8;color:rgba(255,255,255,.75);margin:1.5rem 0 2rem}
.ndoc-t-visual{position:relative;display:flex;justify-content:center;align-items:center}
.ndoc-t-visual img{max-width:100%;width:100%;filter:drop-shadow(0 30px 80px rgba(0,0,0,.5));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ndoc-t-visual:hover img{transform:scale(1.04) translateY(-8px)}
.ndoc-t-visual::before{content:'';position:absolute;width:70%;height:70%;background:radial-gradient(circle,rgba(133,255,199,.1) 0%,transparent 70%);filter:blur(40px)}


/* ════════════════════════════════════════════════
   MYTE TEASER
   ════════════════════════════════════════════════ */
.myte-t{background:var(--mr);position:relative;overflow:hidden}
.myte-t::before{content:'';position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 1l13 7.5v15L14 31 1 23.5v-15z' fill='none' stroke='%2385FFC7' stroke-width='.6'/%3E%3C/svg%3E");background-size:28px 49px}
.myte-t::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 70% 50%,rgba(133,255,199,.06) 0%,transparent 70%)}
.myte-t>*{position:relative;z-index:1}
.myte-t-body{font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.8;color:rgba(255,255,255,.75);margin:1.5rem 0 2rem}
.list-dot-spaced li{margin-bottom:.7rem}
.list-dot-spaced+.btn,.list-dot-spaced+a{margin-top:2rem;display:inline-flex}
.myte-t-visual{position:relative;display:flex;justify-content:center;align-items:center}
.myte-t-visual img{max-width:100%;width:100%;filter:drop-shadow(0 30px 80px rgba(0,0,0,.5));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.myte-t-visual:hover img{transform:scale(1.04) translateY(-8px)}
.myte-t-visual::before{content:'';position:absolute;width:70%;height:70%;background:radial-gradient(circle,rgba(133,255,199,.1) 0%,transparent 70%);filter:blur(40px)}


/* ════════════════════════════════════════════════
   INFRASTRUCTURE — 5 Labs, 4 Continents
   ════════════════════════════════════════════════ */
.infra{background:var(--bp);position:relative;overflow:hidden}
.infra::before{content:'';position:absolute;inset:0;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 1l27 15.5v31L28 63 1 47.5v-31z' fill='none' stroke='%2385FFC7' stroke-width='.4'/%3E%3C/svg%3E");background-size:56px 97px}
.infra>*{position:relative;z-index:1}
/* KPI row + intro + testimonials — shared width, min-width 0 (flex/grid overflow) */
.infra-content-stack{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.infra-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:clamp(4rem,8vw,6rem);border-bottom:2px solid rgba(133,255,199,.06);padding-bottom:clamp(3rem,6vw,5rem);min-width:0}
.infra-stat{position:relative;padding:0 clamp(1.5rem,3vw,2.5rem);min-width:0;overflow:hidden}
.infra-stat:first-child{padding-left:0}
.infra-stat:last-child{padding-right:0}
.infra-stat::after{content:'';position:absolute;top:0;right:0;width:1px;height:100%;background:rgba(133,255,199,.12)}
.infra-stat:last-child::after{display:none}
.infra-stat .isn{font-family:var(--h);font-weight:900;font-size:clamp(3rem,5.5vw,4.5rem);color:var(--aq);line-height:.9;letter-spacing:-.03em}
.infra-stat .isl{font-size:1.05rem;color:rgba(255,255,255,.5);margin-top:.5rem;line-height:1.4;overflow-wrap:break-word;word-wrap:break-word}

.infra-intro{max-width:780px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.infra-body{font-size:clamp(1.15rem,1.4vw,1.3rem);line-height:1.8;color:rgba(255,255,255,.75);margin-top:1rem}


/* ════════════════════════════════════════════════
   N-DOC PARAMS — Inline data blocks
   (also used on homepage via homepage.css — same class names, page-tuned sizes)
   ════════════════════════════════════════════════ */
.ndoc-params{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.ndoc-param{padding:1.2rem;background:rgba(3,47,79,.6);border:1px solid rgba(133,255,199,.12);text-align:center;transition:all .3s}
.ndoc-param:hover{border-color:rgba(133,255,199,.3);transform:translateY(-3px)}
.ndoc-param .param-abbr{font-family:var(--h);font-weight:900;font-size:1.6rem;color:var(--aq);line-height:1;margin-bottom:.4rem}
.ndoc-param .param-name{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.ndoc-param .param-desc{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.4}

/* Section-CTA left-aligned variant */
.section-cta-left{text-align:left;margin-top:2.5rem}
.section-cta-left .btn{display:inline-flex}

/* s-sub centered — used inside .s-hdr-c for subheadings */
.s-sub-c{text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}

/* N-DOC teaser eyebrow spacing */
.ndoc-t-ey{margin-top:1.5rem}

/* Float-element positions (page-specific) */
.float-el.fe-elements{font-size:12rem;top:10%;right:3%;opacity:.02}
.float-el.fe-reading{font-size:10rem;bottom:10%;left:3%;opacity:.02}

/* Nav active page indicator */
.nav-l .nav-l-active{opacity:1;color:var(--aq)}
.nav-l .nav-l-active::after{width:100%}

/* Infra content spacing */
.infra-body + .infra-body{margin-top:1.2rem}

@media(max-width:768px){
  .ndoc-params{grid-template-columns:1fr}
  .section-cta-left{text-align:center}
  .section-cta-left .btn{width:100%}
}


/* ════════════════════════════════════════════════
   HABITAT INFO BOX — 9 Aquarium Types
   ════════════════════════════════════════════════ */
.habitat-box{
  margin-top:clamp(3rem,6vw,5rem);
  padding:clamp(2rem,3.5vw,3rem);
  background:rgba(1,24,39,.65);
  border:1px solid rgba(133,255,199,.15);
  position:relative;overflow:hidden
}
.habitat-box::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(0,100,102,.18) 0%,transparent 70%);
  pointer-events:none
}
.habitat-box>*{position:relative;z-index:1}

.habitat-box-hdr{
  display:flex;align-items:flex-start;gap:1.5rem;
  margin-bottom:2rem
}
.habitat-box-hdr .icon-box{flex-shrink:0;margin-top:.2rem}

.habitat-label{
  font-family:var(--h);font-weight:700;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--aq);opacity:.75;margin-bottom:.4rem
}
.habitat-h{
  font-family:var(--h);font-weight:900;
  font-size:clamp(1.2rem,2vw,1.5rem);
  text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:.6rem;line-height:1.2
}
.habitat-intro{
  font-size:1rem;line-height:1.65;
  color:rgba(255,255,255,.68);max-width:72ch
}

.habitat-grid{
  display:flex;flex-wrap:wrap;gap:.75rem;
  padding:0;margin:0
}
.habitat-pill{
  /* button reset */
  background:rgba(0,100,102,.2);border:1px solid rgba(133,255,199,.15);
  font-family:var(--h);font-size:1rem;font-weight:700;color:var(--aq);
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.7rem 1.3rem;
  white-space:nowrap;transition:all .3s;cursor:pointer;
  -webkit-appearance:none;appearance:none;line-height:1
}
.habitat-pill:hover{
  background:rgba(0,100,102,.38);
  border-color:rgba(133,255,199,.45);
  transform:translateY(-2px)
}
.habitat-pill.active{
  background:rgba(0,100,102,.5);
  border-color:var(--aq);
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(133,255,199,.15)
}
.habitat-pill i{font-size:1.1rem;flex-shrink:0}
.habitat-pill span{color:rgba(255,255,255,.88)}

/* Detail panel */
.habitat-detail{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.16,1,.3,1)
}
.hd-inner{
  margin-top:1.25rem;
  padding:1.5rem 1.75rem;
  background:rgba(1,24,39,.6);
  border:1px solid rgba(133,255,199,.2);
  border-left:3px solid var(--aq)
}
.hd-top{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:.75rem;flex-wrap:wrap
}
.hd-name{
  font-family:var(--h);font-weight:900;
  font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--w)
}
.hd-level{
  font-family:var(--h);font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3em .85em;border:1px solid;
}
.hd-desc{
  font-size:1rem;line-height:1.65;
  color:rgba(255,255,255,.72);margin-bottom:.75rem
}
.hd-animals{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:1rem;line-height:1.6;
  color:rgba(255,255,255,.72);
  margin-bottom:1rem
}
.hd-animals i{color:var(--aq);font-size:1rem;flex-shrink:0;margin-top:.2rem}
.hd-facts{
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  list-style:none;padding:0;margin:0
}
.hd-facts li{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.88rem;font-weight:600;
  color:rgba(255,255,255,.55);
  padding:.3rem .8rem;
  background:rgba(133,255,199,.05);
  border:1px solid rgba(133,255,199,.1)
}
.hd-facts i{color:var(--aq);font-size:.82rem;flex-shrink:0}

/* Problem Selector */
.problem-selector{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(133,255,199,.08)
}
.ps-label{
  font-size:.88rem;font-weight:600;
  color:rgba(255,255,255,.35);
  margin-bottom:.75rem;
  display:flex;align-items:center;gap:.6rem
}
.ps-label i{color:rgba(133,255,199,.4);font-size:.85rem}
.ps-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.ps-tag{
  font-size:.82rem;font-weight:700;font-family:var(--h);
  letter-spacing:.06em;text-transform:uppercase;
  padding:.3em .85em;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);
  white-space:nowrap
}

@media(max-width:768px){
  .habitat-box-hdr{flex-direction:column;gap:1rem}
  .habitat-intro{font-size:1rem}
  .habitat-pill{font-size:1rem;padding:.65rem 1.1rem}
  .hd-inner{padding:1.2rem 1.25rem}
  .hd-facts{gap:.35rem}
  .hd-facts li{font-size:.82rem}
}


/* ════════════════════════════════════════════════
   FAQ — Page-specific background
   ════════════════════════════════════════════════ */
.faq-sec{background:var(--mr);position:relative;overflow:hidden}
.faq-sec::before{content:'';position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 1l13 7.5v15L14 31 1 23.5v-15z' fill='none' stroke='%2385FFC7' stroke-width='.6'/%3E%3C/svg%3E");background-size:28px 49px}
.faq-sec>*{position:relative;z-index:1}


/* ════════════════════════════════════════════════
   CTA — Final Conversion
   ════════════════════════════════════════════════ */
.icp-cta{padding:clamp(10rem,20vw,16rem) var(--section-pad);text-align:center;position:relative;overflow:hidden}
.icp-cta-inner{max-width:900px;margin:0 auto;width:100%;min-width:0}
.icp-cta::before{content:'';position:absolute;inset:0;background:url('../../media/images/Coral Pattern Backgrounds/coral_pattern_1.jpg') center/cover;opacity:.06;filter:saturate(.3)}
.icp-cta::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(0,100,102,.35) 0%,var(--bp) 70%)}
.icp-cta .float-el{pointer-events:none}
.icp-cta .float-el.fe-1{font-size:8rem;top:15%;left:8%;opacity:.03}
.icp-cta .float-el.fe-2{font-size:6rem;bottom:20%;right:10%;opacity:.025}
.icp-cta>*{position:relative;z-index:1}
.icp-cta h2{font-family:var(--h);font-weight:900;font-size:clamp(3rem,6vw,5.5rem);text-transform:uppercase;line-height:.95;letter-spacing:-.02em;margin-bottom:1.2rem}
.icp-cta-inner>p:not(.section-ey){font-size:clamp(1.2rem,1.5vw,1.4rem);color:rgba(255,255,255,.65);max-width:48ch;margin:0 auto 3rem;line-height:1.75}
.icp-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto}


/* ════════════════════════════════════════════════
   PAGE-SPECIFIC RESPONSIVE
   ════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media(max-width:1024px){
  .hero-product img{max-height:55vh}
  .compare{grid-template-columns:1fr;gap:1rem}
  .compare-vs{padding:.25rem 0}
  .el-groups{grid-template-columns:repeat(2,1fr)}
  .el-group:nth-child(1){grid-column:auto}
  .el-group:nth-child(2){grid-column:auto}
  .el-group:nth-child(3){grid-column:1/-1}
  .el-group:nth-child(4){grid-column:auto}
  .el-group:nth-child(5){grid-column:auto}
  .process-steps{grid-template-columns:1fr 1fr}
  .showcase-grid{grid-template-columns:1fr 1fr}
  .infra-stats{grid-template-columns:1fr 1fr}
  .infra-stat{padding:0 1.5rem}
  .infra-stat:nth-child(odd){padding-left:0}
  .infra-stat:nth-child(even){padding-right:0}
  .infra-stat:nth-child(n+3){margin-top:2rem}
  .ndoc-t-visual{order:-1}
  .ndoc-t-visual img{max-width:400px}
  .process-app{gap:clamp(2rem,4vw,3.5rem)}
  .process-app-visual img{max-width:380px}
}

/* ── Mobile (≤768px) ── */
@media(max-width:768px){
  .icp-hero{align-items:flex-end}
  .icp-hero .hero-ct{grid-template-columns:1fr;text-align:center}
  .hero-product{justify-self:center;order:-1}
  .hero-product img{max-height:none;width:min(70vw,320px);height:auto}
  .icp-hero .hero-ey{justify-content:center}
  .icp-hero .hero-btns{justify-content:center}
  .hero-t{font-size:clamp(2rem,8vw,3rem)}

  .bridge-body{font-size:1.05rem}
  .compare-n{font-size:clamp(2.5rem,10vw,3.5rem)}
  .compare-card{padding:1.5rem}

  .el-groups{grid-template-columns:1fr}
  .el-group:nth-child(1),.el-group:nth-child(2),.el-group:nth-child(3),.el-group:nth-child(4),.el-group:nth-child(5){grid-column:auto}
  .el-group-danger .el-sym{width:44px;height:44px;font-size:.88rem}

  .process-steps{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid rgba(133,255,199,.06)}
  .step:last-child{border-bottom:none}
  .step-n{font-size:3.5rem}
  .process-app{grid-template-columns:1fr}
  .process-app-visual{order:-1}
  .process-app-visual img{max-width:320px}

  .showcase-grid{grid-template-columns:1fr}

  .ndoc-t-visual{order:-1}
  .ndoc-t-visual img{max-width:320px}

  .myte-t-visual img{max-width:360px}

  .infra-stats{grid-template-columns:1fr;gap:1.5rem}
  .infra-stat{padding:0 0 1.5rem 0;border-bottom:1px solid rgba(133,255,199,.06)}
  .infra-stat:nth-child(odd){padding-left:0}
  .infra-stat:nth-child(n+3){margin-top:0}
  .infra-stat::after{display:none}
  .infra-stat .isn{font-size:clamp(3rem,10vw,4.5rem)}

  .icp-cta{padding:clamp(6rem,14vw,10rem) var(--section-pad)}
  .icp-cta h2{font-size:clamp(2rem,8vw,3.2rem)}
  .icp-cta-inner>p:not(.section-ey){font-size:1.05rem}
  .icp-cta-btns{flex-direction:column;align-items:stretch}
  .icp-cta-btns .btn{width:100%}
}

/* ── Small mobile (≤480px) ── */
@media(max-width:480px){
  .hero-t{font-size:clamp(1.7rem,7vw,2.4rem)}
  .icp-cta h2{font-size:clamp(1.7rem,7vw,2.4rem)}
  .el-group{padding:1.5rem}
  .step{padding:1.8rem 1.5rem}
  .compare-card{padding:1.2rem}
}