/* ============================================================
   TECHQRA — Product sub-page styles
   (loaded after style.css; reuses its design tokens)
   ============================================================ */

/* ---- Sub-page hero ---- */
.subhero {
  position: relative; overflow: hidden; color: #fff; padding: 140px 0 54px;
  background: radial-gradient(120% 120% at 80% -10%, #2b3aa0 0%, #141a45 48%, #0b1030 100%);
}
.subhero__bg { position: absolute; inset: 0; z-index: 0; }
.subhero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(110% 80% at 70% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(110% 80% at 70% 0%, #000 30%, transparent 75%);
}
.subhero__inner { position: relative; z-index: 1; max-width: 820px; }

.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 24px; }
.breadcrumb a { color: rgba(255,255,255,.6); transition: color .2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: rgba(255,255,255,.3); }

.subhero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; margin: 14px 0 18px; }
.subhero__lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: rgba(255,255,255,.82); max-width: 640px; }
.subhero__sub { font-size: 1.02rem; color: rgba(255,255,255,.6); margin-top: 12px; }

.spec-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.spec-chips span {
  font-size: 13.5px; font-weight: 600; color: #fff;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.spec-chips span strong { color: var(--accent); }

/* ---- Overview band ---- */
.overview { padding: 58px 0; }
.overview__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.overview h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 18px; }
.overview p { color: var(--body); font-size: 1.1rem; }
.overview p + p { margin-top: 14px; }
.flow-card {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow-sm);
}
.flow-step { display: flex; gap: 16px; padding: 16px 0; }
.flow-step:not(:last-child) { border-bottom: 1px solid var(--line); }
.flow-step__ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef2ff, #e6ecff); border: 1px solid #dbe2fb; color: var(--brand);
  font-weight: 800; font-family: var(--display);
}
.flow-step h4 { font-size: 1.05rem; margin-bottom: 4px; }
.flow-step p { font-size: 14.5px; color: var(--muted); }

/* ---- Model cards (hardware) ---- */
.models { padding: 58px 0; background: var(--bg-alt); }
.models__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.model {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px 36px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: all .35s var(--ease);
}
.model:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #d2d8f2; }
.model__tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: var(--bg-soft); border: 1px solid #e0e5f6;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.model h3 { font-size: 2rem; letter-spacing: -.02em; }
.model__sub { color: var(--muted); font-size: 15px; margin: 4px 0 22px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.model__list { list-style: none; display: grid; gap: 12px; }
.model__list li { display: flex; gap: 12px; font-size: 15px; color: var(--body); line-height: 1.5; }
.model__list li::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---- Spec table / grid ---- */
.specs { padding: 58px 0; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.spec {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm); transition: all .3s var(--ease);
}
.spec:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.spec__val { font-family: var(--display); font-weight: 800; font-size: 1.9rem; color: var(--brand-600); letter-spacing: -.02em; }
.spec__key { font-size: 14.5px; color: var(--muted); margin-top: 6px; }

/* ---- Feature rows (alternating) ---- */
.features { padding: 58px 0; background: var(--bg-alt); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 40px 0; }
.frow + .frow { border-top: 1px solid var(--line); }
.frow--rev .frow__media { order: -1; }
.frow__no { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--brand); letter-spacing: .12em; }
.frow h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 10px 0 14px; }
.frow p { color: var(--body); font-size: 1.05rem; }
.frow__list { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.frow__list li { display: flex; gap: 10px; color: var(--body); font-size: 15.5px; }
.frow__list li::before { content: '→'; color: var(--brand); font-weight: 700; }

/* decorative media panel (on-brand gradient + glyph instead of stock photo) */
.frow__media {
  position: relative; min-height: 280px; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 120% at 20% 10%, #2b3aa0, #141a45 60%, #0b1030);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
}
.frow__media::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 75%);
}
.frow__media svg { position: relative; z-index: 1; width: min(82%, 380px); height: auto; color: #fff; filter: drop-shadow(0 14px 34px rgba(122,92,240,.42)); }
.frow__media .glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, #5b5be0, transparent 70%); opacity: .5; }

/* ---- Scenarios ---- */
.scenarios { padding: 58px 0; }
.scen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.scen {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; box-shadow: var(--shadow-sm); transition: all .3s var(--ease);
}
.scen:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #d2d8f2; }
.scen__ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, #eef2ff, #e6ecff); border: 1px solid #dbe2fb; color: var(--brand); }
.scen__ic svg { width: 24px; height: 24px; }
.scen h3 { font-size: 1.12rem; margin-bottom: 8px; }
.scen p { font-size: 14.5px; color: var(--muted); }

/* ---- Related products strip ---- */
.related { padding: 58px 0; background: var(--bg-alt); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.relcard {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: all .3s var(--ease);
}
.relcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.relcard h3 { font-size: 1.1rem; }
.relcard p { font-size: 14.5px; color: var(--muted); flex: 1; }
.relcard__link { font-weight: 600; color: var(--brand); font-size: 14.5px; }

/* ---- Section heads reused ---- */
.psection__head { max-width: 700px; margin: 0 auto 8px; text-align: center; }

/* ============================================================
   FAMILY — featured sub-product (IP/GPRS POS Gateway)
   ============================================================ */
.family { padding: 60px 0; }
.family-feature {
  display: grid; grid-template-columns: 1.12fr .88fr; align-items: stretch;
  margin-top: 46px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #141d4e 0%, var(--brand-ink) 58%, #0a0f2c 100%);
  border: 1px solid rgba(255,255,255,.09); box-shadow: var(--shadow-lg);
  position: relative; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.family-feature::before {
  content: ""; position: absolute; width: 460px; height: 460px; right: -140px; top: -160px;
  background: radial-gradient(circle, rgba(91,91,224,.38), transparent 64%); pointer-events: none;
}
.family-feature::after {
  content: ""; position: absolute; width: 360px; height: 360px; left: -120px; bottom: -180px;
  background: radial-gradient(circle, rgba(56,140,210,.28), transparent 66%); pointer-events: none;
}
.family-feature:hover { transform: translateY(-6px); box-shadow: 0 44px 84px -32px rgba(14,20,55,.62); }
.family-feature__body { position: relative; z-index: 1; padding: clamp(34px, 4vw, 58px); display: flex; flex-direction: column; align-items: flex-start; }
.family-feature__tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(143,209,106,.4); background: rgba(143,209,106,.1);
  padding: 6px 13px; border-radius: 999px;
}
.family-feature__title { color: #fff; font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin: 18px 0 12px; letter-spacing: -.02em; font-weight: 800; }
.family-feature__desc { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 470px; line-height: 1.6; }
.family-feature__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.family-feature__chips span {
  font-size: 12.5px; font-weight: 600; color: #fff; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
}
.family-feature__link { margin-top: auto; font-weight: 700; color: #fff; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; transition: gap .3s var(--ease), color .3s var(--ease); }
.family-feature:hover .family-feature__link { color: var(--accent); gap: 13px; }
.family-feature__art { position: relative; z-index: 1; display: grid; place-items: center; padding: 34px; border-left: 1px solid rgba(255,255,255,.08); }
.family-feature__art svg { width: 100%; max-width: 460px; height: auto; }
@media (max-width: 820px) {
  .family { padding: 58px 0; }
  .family-feature { grid-template-columns: 1fr; }
  .family-feature__art { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); order: -1; padding: 30px; }
  .family-feature__art svg { max-width: 240px; }
}

/* ============================================================
   THALES HSM PORTFOLIO
   ============================================================ */
.hsm { padding: 58px 0; }
.hsm-group { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 40px 0; align-items: start; }
.hsm-group + .hsm-group { border-top: 1px solid var(--line); }
.hsm-group__label { position: sticky; top: 100px; }
.hsm-group__tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: var(--bg-soft); border: 1px solid #e0e5f6;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.hsm-group__tag--pay { color: #2f7d3a; background: #eef7ee; border-color: #cfe6d0; }
.hsm-group__label h3 { font-size: 1.4rem; margin-bottom: 8px; }
.hsm-group__label p { color: var(--muted); font-size: 14.5px; }
.hsm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hsm-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hsm-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--brand), var(--violet)); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.hsm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d2d8f2; }
.hsm-card:hover::before { transform: scaleY(1); }
.hsm-card h4 { font-size: 1.08rem; margin-bottom: 6px; color: var(--ink); }
.hsm-card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.hsm-note { text-align: center; margin-top: 40px; color: var(--muted); font-size: 1.02rem; }
.hsm-note a { color: var(--brand); font-weight: 600; }

/* ============================================================
   REFINED DYNAMISM (sub-pages)
   ============================================================ */

/* Feature rows: choreographed per-child stagger instead of a single block fade */
.frow.reveal { opacity: 1; transform: none; }
.frow.reveal > div { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.frow.reveal.in > div { opacity: 1; transform: none; }
.frow.reveal.in > div:nth-child(2) { transition-delay: .14s; }

/* Media panels come alive: floating icon, drifting glow, slow sheen */
.frow__media svg { animation: floatA 9s ease-in-out infinite; }
.frow__media .glow { animation: glowDrift 12s ease-in-out infinite; }
@keyframes glowDrift {
  0%,100% { transform: translate(-30%, -10%) scale(1); opacity: .45; }
  50% { transform: translate(30%, 15%) scale(1.15); opacity: .65; }
}
.frow__media::after {
  content: ''; position: absolute; inset: -50%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.06) 40deg, transparent 90deg);
  animation: sheen 14s linear infinite;
}
@keyframes sheen { to { transform: rotate(360deg); } }

/* Subhero: gentle entrance lift for the whole block */
.subhero__inner > .reveal { transition-duration: .8s; }

/* Spec cards: animated top accent on hover */
.spec { position: relative; overflow: hidden; }
.spec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--violet));
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.spec:hover::before { transform: scaleX(1); }

/* Media-art illustration animations (themed SVG scenes in feature panels) */
.media-art .a-pulse   { animation: aPulse 2.6s ease-in-out infinite; }
.media-art .a-pulse-2 { animation: aPulse 2.6s ease-in-out infinite .85s; }
.media-art .a-pulse-3 { animation: aPulse 2.6s ease-in-out infinite 1.6s; }
.media-art .a-spin    { transform-box: fill-box; transform-origin: center; animation: aSpin 16s linear infinite; }
.media-art .a-spin-rev{ transform-box: fill-box; transform-origin: center; animation: aSpin 12s linear infinite reverse; }
.media-art .a-flow    { animation: aFlow 1.1s linear infinite; }
.media-art .a-sweep   { animation: aSweep 3.6s ease-in-out infinite; }
.media-art .a-zip     { animation: aZip 2.8s ease-in-out infinite; }
.media-art .a-zip-2   { animation: aZip 2.8s ease-in-out infinite .9s; }
.media-art .a-zip-3   { animation: aZip 2.8s ease-in-out infinite 1.8s; }
@keyframes aPulse { 0%,100% { opacity: .28; } 50% { opacity: 1; } }
@keyframes aSpin  { to { transform: rotate(360deg); } }
@keyframes aFlow  { to { stroke-dashoffset: -24; } }
@keyframes aSweep { 0% { transform: translateY(-2px); opacity: 0; } 15%,80% { opacity: .85; } 100% { transform: translateY(62px); opacity: 0; } }
@keyframes aZip   { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(196px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .frow__media svg, .frow__media .glow, .frow__media::after { animation: none !important; }
  .frow.reveal > div { opacity: 1; transform: none; transition: none; }
  .media-art * { animation: none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .overview__grid, .frow, .models__grid { grid-template-columns: 1fr; gap: 32px; }
  .frow--rev .frow__media { order: 0; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .scen-grid { grid-template-columns: 1fr 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .hsm-group { grid-template-columns: 1fr; gap: 22px; }
  .hsm-group__label { position: static; }
}
@media (max-width: 560px) {
  .spec-grid, .scen-grid, .hsm-grid { grid-template-columns: 1fr; }
  .subhero { padding-top: 120px; }
}