/* ═══════════════════════════════════════════════
   TRITON Toolkit — Page-Specific Styles
   Global design system: ../global.css
   ═══════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
.hero-t{font-size:clamp(3rem,7vw,6.5rem);max-width:16ch}

/* Reusable intro paragraph width cap */
.tk-intro{max-width:65ch}

/* CTA sub-text centering */
.tk-cta-sub{max-width:50ch;margin-left:auto;margin-right:auto}

/* ════════════════════════════════════════════════
   CALCULATOR GRID
   ════════════════════════════════════════════════ */
.calc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem
}

.calc-card{
  display:flex;flex-direction:column;
  padding:clamp(1.8rem,2.5vw,2.4rem);
  background:rgba(1,24,39,.6);
  border:1px solid rgba(133,255,199,.08);
  position:relative;overflow:hidden;
  transition:all .45s cubic-bezier(.16,1,.3,1)
}
.calc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--aq),transparent);
  opacity:0;transition:opacity .4s
}
.calc-card:hover{
  border-color:rgba(133,255,199,.25);
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 40px rgba(133,255,199,.06)
}
.calc-card:hover::before{opacity:1}

.calc-icon{
  width:52px;height:52px;
  display:grid;place-items:center;
  background:rgba(133,255,199,.06);
  border:1px solid rgba(133,255,199,.12);
  margin-bottom:1.2rem;
  transition:all .35s
}
.calc-card:hover .calc-icon{
  background:rgba(133,255,199,.12);
  border-color:rgba(133,255,199,.3);
  box-shadow:0 0 20px rgba(133,255,199,.1)
}
.calc-icon i{font-size:1.3rem;color:var(--aq)}

.calc-card h3{
  font-family:var(--h);font-weight:900;
  font-size:1rem;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:.6rem;
  line-height:1.2
}

.calc-card p{
  font-size:1rem;line-height:1.6;
  color:rgba(255,255,255,.65);
  flex:1;margin-bottom:1.2rem
}

.calc-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--h);font-weight:700;
  font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(133,255,199,.5);
  margin-bottom:1rem
}
.calc-tag i{font-size:.55rem}

.calc-link{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--h);font-weight:900;
  font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--aq);opacity:.7;
  transition:all .3s;
  margin-top:auto;padding-top:.4rem;
  border-top:1px solid rgba(133,255,199,.06)
}
.calc-link i{font-size:.75rem;transition:transform .3s}
.calc-card:hover .calc-link{opacity:1}
.calc-card:hover .calc-link i{transform:translateX(4px)}

/* ════════════════════════════════════════════════
   EXPERT QUOTE — Between sections
   ════════════════════════════════════════════════ */
.toolkit-quote{
  background:linear-gradient(135deg,rgba(0,100,102,.2) 0%,rgba(1,24,39,.4) 100%);
  border-top:1px solid rgba(133,255,199,.06);
  border-bottom:1px solid rgba(133,255,199,.06)
}


/* ════════════════════════════════════════════════
   UNIT CONVERTER — Inline widget
   ════════════════════════════════════════════════ */
.converter-section{
  background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.35) 100%)
}

.converter-h{font-size:clamp(1.8rem,4vw,3rem)}

.converter-shell{
  max-width:680px;margin:0 auto;
  background:rgba(1,24,39,.7);
  border:1px solid rgba(133,255,199,.1);
  padding:clamp(2rem,3vw,2.8rem);
  position:relative;overflow:hidden
}
.converter-shell::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--aq),transparent);
  opacity:.4
}

.converter-tabs{
  display:flex;gap:.5rem;margin-bottom:2rem;
  border-bottom:1px solid rgba(133,255,199,.08);
  padding-bottom:1rem
}
.converter-tab{
  font-family:var(--h);font-weight:700;
  font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;
  padding:.6rem 1.2rem;
  background:none;border:1px solid rgba(133,255,199,.08);
  color:rgba(255,255,255,.45);
  cursor:pointer;transition:all .3s
}
.converter-tab:hover{
  color:rgba(255,255,255,.7);
  border-color:rgba(133,255,199,.2)
}
.converter-tab.active{
  color:var(--aq);
  border-color:var(--aq);
  background:rgba(133,255,199,.08)
}

.converter-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:1rem;align-items:end
}
.converter-field label{
  display:block;
  font-family:var(--h);font-weight:700;
  font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:.5rem
}
.converter-field input{
  width:100%;padding:.8rem 1rem;
  background:rgba(1,24,39,.8);
  border:1px solid rgba(133,255,199,.12);
  color:var(--w);font-family:var(--h);
  font-size:1.2rem;font-weight:700;
  letter-spacing:.02em;
  transition:border-color .3s;
  -moz-appearance:textfield
}
.converter-field input::-webkit-outer-spin-button,
.converter-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.converter-field input:focus{
  outline:none;
  border-color:var(--aq);
  box-shadow:0 0 20px rgba(133,255,199,.08)
}

.converter-swap{
  width:44px;height:44px;
  display:grid;place-items:center;
  background:rgba(133,255,199,.06);
  border:1px solid rgba(133,255,199,.15);
  cursor:pointer;
  color:var(--aq);font-size:1rem;
  transition:all .3s;
  margin-bottom:.15rem
}
.converter-swap:hover{
  background:rgba(133,255,199,.15);
  transform:rotate(180deg)
}

.converter-hint{
  text-align:center;margin-top:1.2rem;
  font-size:.88rem;color:rgba(255,255,255,.4)
}


/* ════════════════════════════════════════════════
   DOWNLOADS — File manager feel
   ════════════════════════════════════════════════ */
.downloads-section{
  background:linear-gradient(180deg,rgba(3,47,79,.25) 0%,var(--bp) 100%)
}

.dl-category{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.dl-category:last-child{margin-bottom:0}

.dl-category-label{
  font-family:var(--h);font-weight:900;
  font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--aq);
  margin-bottom:1rem;padding-bottom:.5rem;
  border-bottom:1px solid rgba(133,255,199,.08);
  display:flex;align-items:center;gap:.8rem
}
.dl-category-label i{font-size:.9rem;opacity:.6}

.dl-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1.2rem;align-items:center;
  padding:1rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .3s
}
.dl-item:hover{background:rgba(133,255,199,.03)}
.dl-item:last-child{border-bottom:none}

.dl-icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  background:rgba(133,255,199,.04);
  color:var(--aq);font-size:1.1rem
}

.dl-info h4{
  font-family:var(--h);font-weight:700;
  font-size:.95rem;letter-spacing:.02em;
  margin-bottom:.15rem
}
.dl-info span{
  font-size:.85rem;
  color:rgba(255,255,255,.4)
}

.dl-action{
  font-family:var(--h);font-weight:700;
  font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--aq);opacity:.6;
  display:flex;align-items:center;gap:.5rem;
  transition:opacity .3s;
  white-space:nowrap
}
.dl-action i{font-size:.7rem}
.dl-item:hover .dl-action{opacity:1}


/* ════════════════════════════════════════════════
   COMING SOON — Phase 2 teasers
   ════════════════════════════════════════════════ */
.soon-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem
}

.soon-card{
  display:flex;flex-direction:column;
  padding:clamp(2rem,3vw,2.8rem);
  border:2px dashed rgba(133,255,199,.12);
  background:rgba(1,24,39,.3);
  position:relative;overflow:hidden;
  transition:all .4s
}
.soon-card:hover{
  border-color:rgba(133,255,199,.2);
  background:rgba(1,24,39,.5)
}

.soon-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--h);font-weight:900;
  font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--aq);opacity:.5;
  margin-bottom:1.2rem
}
.soon-badge i{font-size:.6rem}

.soon-card h3{
  font-family:var(--h);font-weight:900;
  font-size:1.15rem;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:.8rem
}

.soon-card p{
  font-size:1.05rem;line-height:1.65;
  color:rgba(255,255,255,.6);
  flex:1;margin-bottom:1.5rem
}

.soon-card .btn-ghost{
  opacity:.5;pointer-events:none;
  align-self:flex-start
}


/* ════════════════════════════════════════════════
   CTA STRIP — Final conversion
   ════════════════════════════════════════════════ */
.toolkit-cta{
  background:linear-gradient(180deg,var(--bp) 0%,rgba(0,100,102,.25) 50%,var(--bp) 100%);
  text-align:center;
  position:relative
}
.toolkit-cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;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='.4'/%3E%3C/svg%3E");
  background-size:56px 97px
}
.toolkit-cta .section-h{margin-bottom:1rem}
.toolkit-cta .s-sub{margin-bottom:clamp(2rem,4vw,3rem)}
.toolkit-cta-btns{
  display:flex;gap:1.2rem;
  justify-content:center;flex-wrap:wrap
}


/* ════════════════════════════════════════════════
   RESPONSIVE — Tablet (<=1024px)
   ════════════════════════════════════════════════ */
@media(max-width:1024px){
  .calc-grid{grid-template-columns:1fr 1fr}
  .soon-grid{grid-template-columns:1fr 1fr}
}

/* ════════════════════════════════════════════════
   RESPONSIVE — Mobile (<=768px)
   ════════════════════════════════════════════════ */
@media(max-width:768px){
  .calc-grid{grid-template-columns:1fr}
  .soon-grid{grid-template-columns:1fr}

  .converter-row{
    grid-template-columns:1fr;
    gap:.8rem
  }
  .converter-swap{
    justify-self:center;
    transform:rotate(90deg)
  }
  .converter-swap:hover{transform:rotate(270deg)}

  .converter-tabs{flex-wrap:wrap}

  .dl-item{
    grid-template-columns:auto 1fr;
    gap:.8rem
  }
  .dl-action{
    grid-column:1/-1;
    justify-self:start
  }

  .toolkit-cta-btns{flex-direction:column;align-items:center}
  .toolkit-cta-btns .btn{width:100%}
}

/* ════════════════════════════════════════════════
   RESPONSIVE — Small mobile (<=480px)
   ════════════════════════════════════════════════ */
@media(max-width:480px){
  .converter-tab{font-size:.7rem;padding:.5rem .8rem}
}