/* ============================================================
   product.css — шаблон подстраницы продукта.
   Используется поверх styles.css (общая дизайн-система).
   ============================================================ */

.prod-hero{position:relative;min-height:88vh;display:flex;align-items:center;
  padding-top:120px;padding-bottom:60px;overflow:hidden}
.prod-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.prod-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center}
.prod-hero .ph-copy{max-width:560px}
.breadcrumb{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;
  color:var(--text-dim);margin-bottom:26px;letter-spacing:.04em}
.breadcrumb a{color:var(--text-mid);transition:color .25s}
.breadcrumb a:hover{color:var(--text-hi)}
.breadcrumb .sl{opacity:.5}
.prod-hero h1{font-size:clamp(44px,5.4vw,76px);margin-bottom:22px;letter-spacing:-.03em}
.prod-hero h1 .grad{background:linear-gradient(110deg,var(--blue),var(--aqua) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.prod-hero .lead{font-size:clamp(18px,1.7vw,22px);color:var(--text-mid);margin-bottom:34px;max-width:46ch}
.prod-hero .ph-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.prod-tag{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  margin-bottom:26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mid)}
.prod-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px var(--aqua);animation:pulse-dot 2s infinite}
.ph-stats{display:flex;gap:0;max-width:440px}
.ph-stats .s{flex:1;padding:0 24px;border-left:1px solid var(--stroke-soft)}
.ph-stats .s:first-child{padding-left:0;border-left:none}
.ph-stats .v{font-family:var(--font-mono);font-size:clamp(28px,3vw,40px);color:var(--text-hi);line-height:1}
.ph-stats .k{font-size:12.5px;color:var(--text-dim);margin-top:9px}

/* the signature stage on the right of the hero */
.sig-stage{position:relative;width:100%;height:520px}
.sig-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* ---------- generic band ---------- */
.band{padding:110px 0;position:relative}
.band-tight{padding:80px 0}

/* problem -> solution */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.ps-card{padding:40px}
.ps-card .lab{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.ps-card.prob .lab{color:var(--coral)}
.ps-card.sol .lab{color:var(--aqua)}
.ps-card h3{font-size:26px;margin-bottom:14px}
.ps-card p{color:var(--text-mid);font-size:16px;line-height:1.6}
.ps-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 0 30px -4px rgba(61,125,255,.7)}
.ps-arrow svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}

/* capabilities */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cap-card{padding:32px 28px 34px;transition:transform .4s,box-shadow .4s}
.cap-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(15,30,61,.22),0 0 36px -10px rgba(15,164,143,.22)}
.cap-card .cic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(135deg,rgba(40,224,200,.16),rgba(61,125,255,.1));border:1px solid var(--stroke-soft)}
.cap-card .cic svg{width:24px;height:24px;stroke:var(--aqua);fill:none;stroke-width:1.7}
.cap-card h3{font-size:20px;margin-bottom:10px}
.cap-card p{color:var(--text-mid);font-size:14.5px;line-height:1.55}

/* "how it looks" mock */
.mock-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mock-copy h2{font-size:clamp(30px,3.4vw,46px);margin:16px 0 18px}
.mock-copy p{color:var(--text-mid);font-size:16.5px;line-height:1.6;max-width:42ch;margin-bottom:24px}
.mock-list{display:flex;flex-direction:column;gap:13px}
.mock-list .ml{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--text-mid)}
.mock-list .ml svg{width:18px;height:18px;stroke:var(--aqua);fill:none;stroke-width:2;flex:none}
.mock-frame{padding:20px;border-radius:var(--r-lg);position:relative}
.mock-screen{border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#0a1124,#070b16);
  border:1px solid var(--stroke-soft);min-height:380px;position:relative}
.mk-top{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--stroke-soft);background:rgba(255,255,255,.02)}
.mk-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.mk-top .mk-title{margin-left:12px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);letter-spacing:.04em}
.mk-body{padding:20px}
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.mk-kpi{padding:14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--stroke-soft);display:flex;flex-direction:column;gap:5px}
.mk-kpi .kl{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.04em}
.mk-kpi .kv{font-family:var(--font-mono);font-size:22px;color:var(--text-hi);line-height:1}
.mk-kpi .kv i{font-style:normal;font-size:11px;color:var(--text-dim);margin-left:4px}
.mk-kpi .kt{font-size:11px;font-family:var(--font-mono)}
.mk-kpi .kt.up{color:var(--aqua)}
.mk-kpi .kt.dn{color:var(--coral)}
.mk-chart{height:96px;margin-bottom:16px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.02);border:1px solid var(--stroke-soft)}
.mk-chart canvas{width:100%;height:100%;display:block}
.mk-rows{display:flex;flex-direction:column;gap:1px}
.mk-row{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:9px;
  font-size:13px;color:var(--text-mid);transition:background .25s}
.mk-row:hover{background:rgba(255,255,255,.04)}
.mk-row .ra{font-family:var(--font-mono);color:var(--aqua)}
.mk-row .ra.dn{color:var(--coral)}

/* coverage strip */
.cover-strip{padding:70px 0;border-top:1px solid var(--stroke-soft);border-bottom:1px solid var(--stroke-soft)}
.cover-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.cover-big{font-family:var(--font-mono);font-size:clamp(70px,9vw,120px);line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(160deg,var(--text-hi),var(--aqua));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cover-sub{font-size:15px;color:var(--text-dim);margin-top:8px;font-family:var(--font-mono)}
.cover-clients{display:flex;flex-wrap:wrap;gap:12px}
.cover-clients .chip{cursor:default}

/* unique interactive */
.demo-section{position:relative}
.demo-shell{padding:48px;border-radius:var(--r-lg);position:relative;overflow:hidden}
.demo-shell .demo-glow{position:absolute;width:480px;height:480px;left:-120px;bottom:-180px;
  background:radial-gradient(circle,rgba(40,224,200,.32),transparent 65%);filter:blur(70px)}
.demo-head{position:relative;z-index:2;text-align:center;margin-bottom:34px}
.demo-head .eyebrow{justify-content:center}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--stroke-soft)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--text-hi);
  font-family:var(--font-display);font-size:19px;font-weight:500;padding:26px 50px 26px 0;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq-q .pm{flex:none;width:26px;height:26px;position:relative}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--aqua);border-radius:2px;
  transition:transform .35s;top:50%;left:50%}
.faq-q .pm::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq-q .pm::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq-item.open .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
.faq-a p{color:var(--text-mid);font-size:15.5px;line-height:1.65;padding:0 50px 28px 0}

/* related products */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{padding:26px;display:flex;align-items:center;gap:16px;transition:transform .35s,box-shadow .35s}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -26px rgba(15,30,61,.2),0 0 30px -10px rgba(47,107,255,.22)}
.rel-card .ric{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(61,125,255,.12);border:1px solid var(--stroke-soft)}
.rel-card .ric svg{width:22px;height:22px;stroke:var(--aqua);fill:none;stroke-width:1.7}
.rel-card .rt{font-family:var(--font-display);font-size:16px;font-weight:500}
.rel-card .rd{font-size:12.5px;color:var(--text-dim);margin-top:3px}

/* big closing CTA */
.prod-cta{padding:120px 0}
.prod-cta-card{padding:72px 64px;border-radius:var(--r-lg);text-align:center;position:relative;overflow:hidden}
.prod-cta-card .pc-glow{position:absolute;inset:0;background:radial-gradient(120% 130% at 50% 0%,rgba(139,92,246,.32),transparent 60%)}
.prod-cta-card h2{font-size:clamp(34px,4vw,56px);margin-bottom:18px;position:relative;z-index:2}
.prod-cta-card p{color:var(--text-mid);font-size:18px;max-width:46ch;margin:0 auto 34px;position:relative;z-index:2}
.prod-cta-card .pc-actions{display:flex;gap:14px;justify-content:center;position:relative;z-index:2}

/* segmented toggle (reused on product demos) */
.seg{display:inline-flex;gap:6px;padding:6px;border-radius:999px;position:relative}
.seg button{font-family:var(--font-display);font-size:14.5px;color:var(--text-mid);background:none;border:none;
  cursor:pointer;padding:11px 24px;border-radius:999px;position:relative;z-index:1;transition:color .3s;white-space:nowrap}
.seg button.active{color:#fff}
.seg .seg-pill{position:absolute;top:6px;height:calc(100% - 12px);border-radius:999px;z-index:0;
  background:linear-gradient(135deg,rgba(61,125,255,.85),rgba(139,92,246,.85));box-shadow:0 6px 22px -6px rgba(61,125,255,.7);
  transition:left .42s cubic-bezier(.3,.9,.3,1),width .42s cubic-bezier(.3,.9,.3,1)}

@media (max-width:980px){
  .prod-hero .wrap{grid-template-columns:1fr}
  .sig-stage{height:420px;order:-1}
  .ps-grid,.mock-wrap{grid-template-columns:1fr}
  .cap-grid,.rel-grid{grid-template-columns:1fr 1fr}
  .cover-grid{grid-template-columns:1fr;gap:28px}
  .ps-arrow{display:none}
}
@media (max-width:640px){
  .cap-grid,.rel-grid{grid-template-columns:1fr}
  .demo-shell,.prod-cta-card{padding:32px 22px}
}

/* ---------- Islamic Banking interactive ---------- */
.ib-demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:center;position:relative;z-index:2}
.ib-picker{display:flex;flex-direction:column;gap:10px}
.ib-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--stroke-soft);
  color:var(--text-mid);transition:background .3s,border-color .3s,transform .3s}
.ib-opt:hover{background:rgba(255,255,255,.06);transform:translateX(3px)}
.ib-opt.active{background:linear-gradient(135deg,rgba(61,125,255,.16),rgba(139,92,246,.12));border-color:rgba(40,224,200,.4);color:var(--text-hi)}
.ib-opt .ibk{flex:none;width:14px;height:14px;border-radius:4px;transform:rotate(45deg);
  background:rgba(40,224,200,.3);transition:.3s}
.ib-opt.active .ibk{background:var(--aqua);box-shadow:0 0 12px var(--aqua)}
.ib-opt .ibn{font-family:var(--font-display);font-size:17px;font-weight:500;display:block}
.ib-opt .ibs{font-size:12px;color:var(--text-dim);margin-top:2px;display:block}
.ib-info{margin-top:8px;padding:20px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--stroke-soft)}
.ib-info .iit{font-family:var(--font-display);font-size:20px;font-weight:600;margin-bottom:4px}
.ib-info .iis{font-family:var(--font-mono);font-size:12px;color:var(--aqua);letter-spacing:.04em;margin-bottom:12px}
.ib-info .iid{font-size:14px;color:var(--text-mid);line-height:1.6}
.ib-geo{position:relative;height:480px}
.ib-geo canvas{position:absolute;inset:0;width:100%;height:100%}
.ib-noribbon{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-mono);
  font-size:12px;color:var(--aqua);letter-spacing:.04em}
.ib-noribbon::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--aqua);
  background:linear-gradient(45deg,transparent 45%,var(--aqua) 45%,var(--aqua) 55%,transparent 55%)}
@media (max-width:980px){
  .ib-demo{grid-template-columns:1fr}
  .ib-geo{height:380px;order:-1}
}


/* ============================================================
   LIGHT THEME ADAPTATION — FintechStan light site
   Marketing chrome inherits light tokens from styles.css.
   The signature canvases, interactive demos and product
   "screens" are vivid data-viz authored for a dark canvas, so
   we keep them as dark "instrument" islands: each wrapper
   re-declares the full dark palette, and everything nested
   inside renders exactly as it did in the dark theme.
   ============================================================ */
.sig-stage,
.demo-shell,
.mock-screen{
  --blue:#3D7DFF; --aqua:#28E0C8; --violet:#8B5CF6; --coral:#FF7A59;
  --text-hi:#EAF1FF; --text-mid:#9FB0CE; --text-dim:#5F708F;
  --stroke:rgba(255,255,255,.10); --stroke-soft:rgba(255,255,255,.06);
  --glass-fill:rgba(255,255,255,.05);
  color:var(--text-hi);
}

/* hero signature canvas → framed dark instrument panel */
.sig-stage{
  border-radius:24px;
  background:radial-gradient(120% 120% at 35% 18%,#0d1832,#070b16);
  border:1px solid rgba(15,30,61,.10);
  box-shadow:0 40px 80px -46px rgba(15,30,61,.42), inset 0 1px 0 rgba(255,255,255,.05);
}

/* the hero panel now hosts the animated brand logo (logo-anim.js).
   On the LIGHT theme the colour logo needs a light panel to read; on the
   DARK theme we keep the dark instrument panel for the white logo.
   Scoped to the HERO panel only — the interactive demo .sig-stage stays dark. */
html:not([data-theme="dark"]) .prod-hero .sig-stage{
  background:
    radial-gradient(120% 120% at 30% 12%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    linear-gradient(158deg,#EEF4FF 0%,#E2ECFA 58%,#D8E5F7 100%);
  border:1px solid rgba(47,107,255,.16);
  box-shadow:0 40px 80px -46px rgba(31,57,107,.30), inset 0 1px 0 rgba(255,255,255,.7);
}

/* interactive demo consoles → dark surface so the canvases read */
.demo-shell{
  background:radial-gradient(130% 130% at 30% 0%,#0c1530,#070b16);
  border:1px solid rgba(15,30,61,.12);
  box-shadow:0 48px 100px -48px rgba(15,30,61,.5);
}

/* "how it looks" mock screen keeps its dark gradient (already dark) */
.mk-top{background:rgba(255,255,255,.03)}

/* soften card-hover shadows that were tuned for a black canvas */
.cap-card:hover{box-shadow:0 30px 60px -30px rgba(15,30,61,.22),0 0 30px -12px rgba(15,164,143,.18)}
.rel-card:hover{box-shadow:0 24px 50px -28px rgba(15,30,61,.18),0 0 26px -12px rgba(47,107,255,.16)}

/* "Подробное описание продукта →" button under the interactive demo
   (product-detail.css isn't loaded on product pages, so define it here too) */
.detail-cta-row{display:flex;justify-content:center;margin-top:30px;margin-bottom:8px;position:relative;z-index:3}

/* related-product cards: name and description must stack, not run together */
.rel-card > span:last-child{display:flex;flex-direction:column;min-width:0}
.rel-card .rt{display:block}
.rel-card .rd{display:block;margin-top:3px}

/* ============================================================
   CAREER — apply modal (separate candidate form)
   ============================================================ */
.apply-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.apply-modal.open{display:flex}
.apply-backdrop{position:absolute;inset:0;background:rgba(8,14,28,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.apply-card{position:relative;width:100%;max-width:480px;max-height:92vh;overflow:auto;
  padding:32px 30px;border-radius:20px;animation:applyIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes applyIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.apply-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border:none;background:none;
  font-size:26px;line-height:1;color:var(--text-mid);cursor:pointer;border-radius:9px;transition:.18s}
.apply-x:hover{color:var(--text-hi);background:rgba(15,30,61,.06)}
.apply-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua);margin-bottom:6px}
.apply-job{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text-hi);margin-bottom:22px;line-height:1.25}
.apply-field{display:block;margin-bottom:15px}
.apply-field span{display:block;font-size:13px;color:var(--text-mid);margin-bottom:7px}
.apply-field input,.apply-field textarea{width:100%;padding:12px 14px;border-radius:11px;
  border:1px solid var(--stroke);background:rgba(15,30,61,.04);color:var(--text-hi);
  font-family:var(--font-text);font-size:15px;transition:border-color .18s,background .18s}
.apply-field input:focus,.apply-field textarea:focus{outline:none;border-color:var(--blue);background:rgba(47,107,255,.05)}
.apply-field textarea{resize:vertical;min-height:74px}
.apply-err{color:var(--coral, #FF7A59);font-size:13px;min-height:18px;margin:2px 0 10px}
.apply-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.apply-success{display:none;text-align:center;padding:18px 6px}
.apply-success.show{display:block}
.apply-ok{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--aqua),var(--blue));color:#fff;font-size:30px;font-weight:700}
.apply-success h3{font-size:21px;margin-bottom:8px;color:var(--text-hi)}
.apply-success p{color:var(--text-mid);margin-bottom:22px}
/* dark theme: modal inputs readable */
html[data-theme="dark"] .apply-field input,html[data-theme="dark"] .apply-field textarea{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .apply-x:hover{background:rgba(255,255,255,.08)}
@media (max-width:520px){ .apply-card{padding:26px 20px} .apply-actions{flex-direction:column-reverse} .apply-actions .btn{width:100%} }