/* ============================================================
   BRAYNIX — Visual mockups: hero dashboard, charts, flows
   ============================================================ */

/* ============================================================
   REVIEWS / TESTIMONIALS
   ============================================================ */
.review{display:flex;flex-direction:column;gap:16px;height:100%}
.stars{display:flex;gap:3px;color:#F6B23C}
.stars svg{width:18px;height:18px;fill:currentColor;stroke:none}
.review .quote{font-size:1.04rem;line-height:1.6;color:var(--heading);font-weight:500;letter-spacing:-.01em;flex:1}
.review .quote::before{content:"\201C";display:block;font-size:2.4rem;line-height:.5;color:var(--blue);opacity:.35;margin-bottom:8px;font-family:Georgia,serif}
.rv-by{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.rv-by .av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.92rem;background:linear-gradient(135deg,var(--blue),var(--green))}
.rv-by b{display:block;color:var(--heading);font-size:.98rem;line-height:1.2}
.rv-by span{font-size:.84rem;color:var(--muted)}
.rv-stat{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:46px}
.rv-stat .rs{display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);font-weight:600;color:var(--heading);font-size:.92rem}
.rv-stat .rs b{color:var(--blue);font-family:var(--mono)}
.rv-stat .rs .stars{color:#F6B23C}

/* ============================================================
   ABOUT US
   ============================================================ */
.about-card{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(165deg,var(--ink-2),var(--ink));border:1px solid var(--d-line);padding:38px;box-shadow:var(--sh-lg)}
.about-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 320px at 85% 0%,rgba(37,99,235,.28),transparent 60%),radial-gradient(360px 300px at 0% 100%,rgba(16,185,129,.16),transparent 60%)}
.about-card>*{position:relative;z-index:2}
.founder{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.founder .fav{width:62px;height:62px;border-radius:18px;flex:none;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.4rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--green));box-shadow:0 10px 30px -10px var(--blue-glow)}
.founder b{display:block;color:#fff;font-size:1.18rem;letter-spacing:-.02em}
.founder span{color:var(--d-muted);font-size:.9rem}
.about-card .fquote{color:var(--d-text);font-size:1.12rem;line-height:1.55;font-weight:500;letter-spacing:-.015em}
.about-card .fsig{margin-top:18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#34d399}
.about-vals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;padding-top:24px;border-top:1px solid var(--d-line)}
.about-vals .v{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--d-body)}
.about-vals .v svg{width:18px;height:18px;color:#34d399;flex:none}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.about-stats .s .n{font-family:var(--mono);font-weight:800;font-size:2rem;letter-spacing:-.03em;background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.about-stats .s .l{font-size:.85rem;color:var(--muted);margin-top:6px}
@media(max-width:880px){.about-stats{grid-template-columns:repeat(3,1fr)}}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--ink);color:var(--d-body);padding:158px 0 110px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 540px at 78% 8%,rgba(37,99,235,.30),transparent 60%),
  radial-gradient(720px 520px at 8% 90%,rgba(16,185,129,.16),transparent 60%),
  radial-gradient(600px 600px at 50% -10%,rgba(59,130,246,.12),transparent 60%);
  animation:heroDrift 18s ease-in-out infinite alternate}
@keyframes heroDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-22px,18px,0) scale(1.06)}}
.hero::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(148,176,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,176,230,.05) 1px,transparent 1px);
  background-size:54px 54px;mask:radial-gradient(70% 70% at 50% 35%,#000,transparent 78%)}
.hero .container{position:relative;z-index:2}
.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9}
.hero-grid{display:grid;grid-template-columns:1.04fr 1.1fr;gap:48px;align-items:center}

.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 15px 8px 11px;border-radius:999px;
  background:var(--glass);border:1px solid var(--d-line);font-size:.82rem;color:var(--d-text);margin-bottom:26px;font-weight:500;backdrop-filter:blur(8px)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.18);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{color:#fff;margin-bottom:24px}
.hero .lead{color:#AFC0DC;max-width:560px}
.hero-cta{display:flex;gap:14px;margin-top:36px}
.hero-meta{display:flex;gap:30px;margin-top:42px;flex-wrap:wrap}
.hero-meta .hm{display:flex;flex-direction:column;gap:3px}
.hero-meta .hm b{font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:-.03em;font-family:var(--mono)}
.hero-meta .hm span{font-size:.82rem;color:var(--d-muted)}
.hero-meta .hm+.hm{padding-left:30px;border-left:1px solid var(--d-line)}

/* particles */
.particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.particles i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--blue-500);opacity:.5;box-shadow:0 0 8px var(--blue-500);animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.6}90%{opacity:.5}100%{transform:translateY(-180px);opacity:0}}

/* ---------- DASHBOARD STAGE ---------- */
.stage{position:relative;perspective:1600px;min-height:480px}
.dash{
  position:relative;z-index:3;border-radius:var(--r-xl);padding:18px;
  background:linear-gradient(165deg,rgba(23,33,56,.92),rgba(13,19,36,.96));
  border:1px solid var(--d-line);box-shadow:0 40px 90px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);transform:rotateY(-7deg) rotateX(3deg);
  transition:transform .5s var(--ease);transform-style:preserve-3d;
}
.stage:hover .dash{transform:rotateY(-3deg) rotateX(1.5deg)}
.dash-bar{display:flex;align-items:center;gap:10px;padding:4px 6px 14px}
.dash-bar .dots{display:flex;gap:6px}
.dash-bar .dots i{width:10px;height:10px;border-radius:50%;background:#33415c}
.dash-bar .dots i:nth-child(1){background:#ef5f5f}.dash-bar .dots i:nth-child(2){background:#f4bd4f}.dash-bar .dots i:nth-child(3){background:#54c98a}
.dash-bar .url{margin-left:6px;flex:1;font-family:var(--mono);font-size:.72rem;color:var(--d-muted);background:rgba(0,0,0,.25);padding:6px 12px;border-radius:8px;border:1px solid var(--d-line-2)}
.dash-bar .live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.68rem;color:var(--green);font-weight:600;letter-spacing:.08em}
.dash-bar .live .d{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.8s infinite}
.dash-body{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{background:rgba(10,15,30,.55);border:1px solid var(--d-line-2);border-radius:14px;padding:14px}
.panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel .ph h5{font-size:.78rem;color:var(--d-text);font-weight:600;letter-spacing:-.01em}
.panel .ph .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted);padding:3px 7px;border:1px solid var(--d-line);border-radius:6px}
.span-2{grid-column:1/-1}

/* kpi mini */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.kpi{background:rgba(10,15,30,.55);border:1px solid var(--d-line-2);border-radius:12px;padding:11px 12px}
.kpi .lab{font-size:.62rem;color:var(--d-muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em}
.kpi .val{font-size:1.18rem;font-weight:800;color:#fff;font-family:var(--mono);letter-spacing:-.02em;margin-top:5px}
.kpi .chg{font-size:.64rem;font-weight:600;margin-top:3px;display:inline-flex;align-items:center;gap:3px}
.kpi .chg.up{color:var(--green)} .kpi .chg.down{color:#f4795f}

/* bar chart */
.bars{display:flex;align-items:flex-end;gap:7px;height:96px;padding-top:6px}
.bars .b{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--blue-500),rgba(37,99,235,.35));position:relative;transform-origin:bottom;animation:growBar 1s var(--ease) backwards}
.bars .b.g{background:linear-gradient(180deg,#34d399,rgba(16,185,129,.3))}
@keyframes growBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* line/area chart */
.spark{width:100%;height:84px;display:block}
.spark .area{fill:url(#sparkg);opacity:.9}
.spark .ln{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:drawLine 2s var(--ease) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.spark .dot{fill:#fff;stroke:var(--green);stroke-width:2.5}

/* AI feed */
.feed{display:flex;flex-direction:column;gap:9px}
.feed .row{display:flex;align-items:center;gap:9px;font-size:.74rem;color:var(--d-body);opacity:0;animation:feedIn .5s var(--ease) forwards}
.feed .row .ic{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;background:rgba(37,99,235,.16);color:var(--blue-500)}
.feed .row .ic svg{width:13px;height:13px}
.feed .row.ok .ic{background:rgba(16,185,129,.16);color:#34d399}
.feed .row b{color:var(--d-text);font-weight:600}
.feed .row .t{margin-left:auto;font-family:var(--mono);font-size:.6rem;color:var(--d-muted)}
@keyframes feedIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* CRM rows */
.crm-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--d-line-2);font-size:.73rem}
.crm-row:first-of-type{border-top:none}
.crm-row .av{width:24px;height:24px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--blue),var(--green));display:grid;place-items:center;color:#fff;font-size:.6rem;font-weight:700}
.crm-row .nm{color:var(--d-text);font-weight:500}
.crm-row .st{margin-left:auto;font-family:var(--mono);font-size:.58rem;padding:2px 7px;border-radius:5px;letter-spacing:.04em}
.st.won{background:rgba(16,185,129,.16);color:#34d399}
.st.warm{background:rgba(244,189,79,.16);color:#f4bd4f}
.st.new{background:rgba(37,99,235,.16);color:#60a5fa}

/* floating cards */
.float-card{position:absolute;z-index:6;border-radius:16px;padding:13px 15px;
  background:linear-gradient(165deg,rgba(28,40,68,.96),rgba(15,22,42,.97));border:1px solid var(--d-line);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);display:flex;align-items:center;gap:11px;backdrop-filter:blur(12px)}
.float-card .fi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.float-card .fi svg{width:20px;height:20px}
.float-card .ft{display:flex;flex-direction:column;gap:1px}
.float-card .ft b{color:#fff;font-size:.92rem;font-weight:700;font-family:var(--mono);letter-spacing:-.02em}
.float-card .ft span{font-size:.68rem;color:var(--d-muted)}
.fc-1{top:-26px;left:-40px;animation:floaty 6s ease-in-out infinite}
.fc-2{bottom:34px;left:-56px;animation:floaty 7s ease-in-out infinite .8s}
.fc-3{top:48px;right:-44px;animation:floaty 6.5s ease-in-out infinite .4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.fi.blue{background:rgba(37,99,235,.18);color:#60a5fa}
.fi.green{background:rgba(16,185,129,.18);color:#34d399}

/* ============================================================
   WORKFLOW DIAGRAM (reusable)
   ============================================================ */
.flow{position:relative;width:100%}
.flow svg .wire{fill:none;stroke:url(#wireg);stroke-width:2;opacity:.5}
.flow svg .pulse-dot{fill:var(--green)}
.flow-nodes{display:grid;gap:14px}
.node{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:14px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);position:relative;z-index:2}
.dark .node{background:var(--glass);border-color:var(--d-line);box-shadow:none}
.node .ni{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--blue-tint);color:var(--blue)}
.dark .node .ni{background:rgba(37,99,235,.16);color:#60a5fa}
.node .ni svg{width:21px;height:21px}
.node b{display:block;font-size:.98rem;color:var(--heading);font-weight:600}
.dark .node b{color:var(--d-text)}
.node small{font-size:.78rem;color:var(--muted)}
.dark .node small{color:var(--d-muted)}
.node .stat{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:var(--green-600);background:var(--green-tint);padding:4px 9px;border-radius:7px;font-weight:600}
.dark .node .stat{background:rgba(16,185,129,.16);color:#34d399}

/* ============================================================
   WORKFLOW PIPELINE (connect section)
   ============================================================ */
.wf-label{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted);margin-bottom:16px;padding-left:2px}
.wf-label .ld{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(16,185,129,.18);animation:blink 1.9s ease-in-out infinite}
.wf{--wf-gap:16px;position:relative;display:flex;flex-direction:column;gap:var(--wf-gap)}
.wf-node{position:relative;display:grid;grid-template-columns:54px 1fr;gap:16px}
.wf-rail{position:relative}
.wf-rail .dot{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(37,99,235,.22),rgba(16,185,129,.12));border:1px solid var(--d-line);color:#7cb0ff;position:relative;z-index:3;transition:color .45s var(--ease),box-shadow .45s var(--ease);animation:wfDot 6s var(--ease) infinite}
.wf-rail .dot svg{width:24px;height:24px}
.wf-node:not(:last-child) .wf-rail::before{content:"";position:absolute;left:27px;transform:translateX(-50%);top:58px;height:calc(100% - 58px + var(--wf-gap));width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(124,176,255,.12),rgba(52,211,153,.6),rgba(124,176,255,.12));background-size:100% 220%;animation:flowDown 1.7s linear infinite}
@keyframes flowDown{from{background-position:0 110%}to{background-position:0 -120%}}
.wf-card{background:var(--glass);border:1px solid var(--d-line);border-radius:16px;padding:15px 18px;position:relative;overflow:hidden;animation:wfActive 6s var(--ease) infinite}
.wf-card .wf-step{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted)}
.wf-h{display:flex;align-items:center;gap:10px;margin-top:4px}
.wf-h b{color:var(--d-text);font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.wf-stat{margin-left:auto;font-family:var(--mono);font-size:.66rem;font-weight:600;padding:4px 9px;border-radius:7px;letter-spacing:.04em;white-space:nowrap}
.wf-stat.blue{background:rgba(37,99,235,.18);color:#7cb0ff}
.wf-stat.green{background:rgba(16,185,129,.18);color:#34d399}
.wf-card small{display:block;color:var(--d-muted);font-size:.85rem;margin-top:4px}
.wf-node:nth-child(1) .wf-card,.wf-node:nth-child(1) .dot{animation-delay:0s}
.wf-node:nth-child(2) .wf-card,.wf-node:nth-child(2) .dot{animation-delay:1.2s}
.wf-node:nth-child(3) .wf-card,.wf-node:nth-child(3) .dot{animation-delay:2.4s}
.wf-node:nth-child(4) .wf-card,.wf-node:nth-child(4) .dot{animation-delay:3.6s}
@keyframes wfActive{0%,80%,100%{border-color:var(--d-line);box-shadow:none;background:var(--glass)}6%,15%{border-color:rgba(52,211,153,.5);box-shadow:0 0 0 1px rgba(52,211,153,.2),0 18px 46px -20px rgba(16,185,129,.55);background:rgba(16,185,129,.06)}}
@keyframes wfDot{0%,80%,100%{color:#7cb0ff;box-shadow:none}6%,15%{color:#fff;box-shadow:0 0 0 4px rgba(52,211,153,.16),0 10px 26px -6px rgba(16,185,129,.6)}}

/* ============================================================
   ECOSYSTEM ORBIT (signature graphic)
   ============================================================ */
.eco{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1}
.eco-rings{position:absolute;inset:0;z-index:1}
.eco-ring{position:absolute;border-radius:50%;border:1px dashed rgba(37,99,235,.18)}
.eco-ring.r1{inset:4%}
.eco-ring.r2{inset:19%;border-color:rgba(16,185,129,.18)}
.eco-ring.r3{inset:34%;border-style:solid;border-color:rgba(37,99,235,.10)}
.eco-ring.spinA{animation:ecoSpin 46s linear infinite}
.eco-ring.spinB{animation:ecoSpin 64s linear infinite reverse}
@keyframes ecoSpin{to{transform:rotate(360deg)}}
.eco-sweep{position:absolute;inset:19%;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,transparent 0 270deg,rgba(37,99,235,.16) 320deg,rgba(16,185,129,.22) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 58%);mask:radial-gradient(circle,transparent 56%,#000 58%);
  animation:ecoSpin 7s linear infinite}
.eco-spokes{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}
.eco-spokes .spoke{stroke:url(#ecoGrad);stroke-width:1.4;opacity:.4}
.eco-spokes .pk{fill:#34d399}
.eco-core{position:absolute;top:50%;left:50%;width:132px;height:132px;transform:translate(-50%,-50%);border-radius:50%;z-index:6;
  background:linear-gradient(150deg,#3B82F6,#10B981);display:grid;place-items:center;color:#fff;
  box-shadow:0 24px 64px -16px rgba(37,99,235,.6),inset 0 2px 0 rgba(255,255,255,.35)}
.eco-core::before,.eco-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(37,99,235,.4)}
.eco-core::before{animation:ecoPulse 3s var(--ease) infinite}
.eco-core::after{animation:ecoPulse 3s var(--ease) infinite 1.5s}
@keyframes ecoPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.eco-core .cc{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;z-index:2}
.eco-core svg{width:34px;height:34px}
.eco-core b{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.eco-sat{position:absolute;transform:translate(-50%,-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:9px;
  animation:ecoFloat var(--ft,6s) ease-in-out infinite}
@keyframes ecoFloat{0%,100%{margin-top:0}50%{margin-top:-9px}}
.eco-sat .ic{width:62px;height:62px;border-radius:17px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
  display:grid;place-items:center;color:var(--blue);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.eco-sat .ic svg{width:28px;height:28px}
.eco-sat .ic.green{color:var(--green-600)}
.eco-sat:hover .ic{transform:scale(1.12);box-shadow:var(--sh-lg);border-color:#C9D6EC}
.eco-sat span{font-size:.78rem;font-weight:600;color:var(--heading);white-space:nowrap;letter-spacing:-.01em;
  background:rgba(246,248,252,.85);backdrop-filter:blur(4px);padding:3px 9px;border-radius:7px;border:1px solid var(--line)}
@media (max-width:520px){
  .eco{max-width:340px}
  .eco-sat .ic{width:48px;height:48px;border-radius:13px}
  .eco-sat .ic svg{width:22px;height:22px}
  .eco-sat span{font-size:.66rem;padding:2px 6px}
  .eco-core{width:96px;height:96px}
}

/* ============================================================
   STAT / counter cards
   ============================================================ */
.stat-card{text-align:left;padding:34px 30px}
.stat-card .num{font-size:3.1rem;font-weight:800;letter-spacing:-.04em;font-family:var(--mono);line-height:1;background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card .lab{margin-top:12px;color:var(--body);font-weight:500}
.dark .stat-card{background:var(--glass);border:1px solid var(--d-line)}
.dark .stat-card .lab{color:var(--d-body)}

/* progress bars */
.pbar{height:8px;border-radius:99px;background:var(--bg-alt2);overflow:hidden}
.dark .pbar{background:rgba(255,255,255,.08)}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--green));width:0;transition:width 1.4s var(--ease)}

/* logo strip */
.logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.logos .lg{display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:13px;border:1px solid var(--line);background:var(--white);font-weight:600;color:var(--muted);font-size:.96rem;box-shadow:var(--sh-sm);transition:.3s}
.logos .lg:hover{color:var(--heading);border-color:#C9D6EC;transform:translateY(-3px)}
.logos .lg svg{width:22px;height:22px;color:var(--blue)}

/* ============================================================
   SERVICE / FEATURE CARDS
   ============================================================ */
.svc{display:flex;flex-direction:column;gap:14px;min-height:286px}
.card.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--green));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:2}
.card.svc:hover::before{transform:scaleX(1)}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.svc-idx{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--faint);letter-spacing:.04em;transition:color .3s}
.svc:hover .svc-idx{color:var(--blue)}
.svc h3{margin-top:2px}
.svc p{color:var(--body);font-size:.97rem;line-height:1.58;flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px}
.svc-tags span{font-family:var(--mono);font-size:.68rem;letter-spacing:.01em;color:var(--muted);background:var(--bg-alt);border:1px solid var(--line);padding:4px 10px;border-radius:999px;transition:border-color .3s,color .3s,background .3s}
.svc:hover .svc-tags span{border-color:#C9D6EC;color:var(--body)}
.svc .arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--blue);font-size:.92rem;transition:gap .3s;margin-top:2px}
.svc:hover .arrow{gap:12px}
.svc .glow{position:absolute;width:200px;height:200px;border-radius:50%;top:-90px;right:-70px;background:radial-gradient(circle,rgba(37,99,235,.12),transparent 70%);opacity:0;transition:opacity .5s}
.svc:hover .glow{opacity:1}

/* feature list */
.feat{display:flex;gap:15px;align-items:flex-start;padding:20px;border-radius:var(--r);transition:background .3s}
.feat:hover{background:var(--bg-alt)}
.dark .feat:hover{background:var(--glass)}
.feat .fk{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--blue-tint);color:var(--blue)}
.dark .feat .fk{background:rgba(37,99,235,.16);color:#60a5fa}
.feat .fk svg{width:22px;height:22px}
.feat b{display:block;color:var(--heading);font-size:1.04rem;margin-bottom:5px}
.dark .feat b{color:var(--d-text)}
.feat p{font-size:.9rem;color:var(--muted);line-height:1.5}
.dark .feat p{color:var(--d-muted)}

/* feature CARDS (Why Braynix / values) */
.fcard{position:relative;padding:26px 24px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-sm);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:#C9D6EC}
.fcard .gw{position:absolute;width:180px;height:180px;border-radius:50%;top:-84px;right:-66px;background:radial-gradient(circle,rgba(37,99,235,.13),transparent 70%);opacity:0;transition:opacity .5s}
.fcard:hover .gw{opacity:1}
.fcard .fic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--blue-tint);color:var(--blue);border:1px solid #DCE6FB;margin-bottom:17px;position:relative;z-index:2;transition:transform .5s var(--ease),background .45s,color .45s,box-shadow .45s,border-color .45s}
.fcard .fic svg{width:24px;height:24px;transition:transform .5s var(--ease)}
.fcard:hover .fic{background:linear-gradient(150deg,var(--blue),var(--green));color:#fff;border-color:transparent;transform:rotate(-6deg) scale(1.08);box-shadow:0 14px 30px -10px var(--blue-glow)}
.fcard:hover .fic svg{transform:rotate(6deg)}
.fcard.green .fic{background:var(--green-tint);color:var(--green-600);border-color:#C6EEDD}
.fcard.green:hover .fic{background:linear-gradient(150deg,var(--green),var(--blue));color:#fff;box-shadow:0 14px 30px -10px rgba(16,185,129,.5)}
.fcard h3{font-size:1.08rem;letter-spacing:-.02em;margin-bottom:7px;position:relative;z-index:2}
.fcard p{font-size:.92rem;color:var(--muted);line-height:1.56;position:relative;z-index:2}
.fcard .fgo{position:absolute;right:22px;bottom:22px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue-tint);color:var(--blue);opacity:0;transform:translateX(-8px) scale(.85);transition:.45s var(--ease);z-index:2}
.fcard:hover .fgo{opacity:1;transform:none}
.fcard .fgo svg{width:15px;height:15px}
/* staggered icon pop on entrance */
[data-stagger].in .fcard .fic{animation:ficPop .65s var(--ease) backwards}
[data-stagger].in>*:nth-child(1) .fic{animation-delay:.05s}
[data-stagger].in>*:nth-child(2) .fic{animation-delay:.13s}
[data-stagger].in>*:nth-child(3) .fic{animation-delay:.21s}
[data-stagger].in>*:nth-child(4) .fic{animation-delay:.29s}
[data-stagger].in>*:nth-child(5) .fic{animation-delay:.37s}
[data-stagger].in>*:nth-child(6) .fic{animation-delay:.45s}
[data-stagger].in>*:nth-child(7) .fic{animation-delay:.53s}
[data-stagger].in>*:nth-child(8) .fic{animation-delay:.61s}
[data-stagger].in>*:nth-child(9) .fic{animation-delay:.69s}
@keyframes ficPop{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){[data-stagger].in .fcard .fic{animation:none}}

/* ============================================================
   INDUSTRIES — problem/solution/result
   ============================================================ */
.ind{display:flex;flex-direction:column;gap:0;overflow:hidden}
.ind-viz{position:relative;height:122px;background:linear-gradient(150deg,var(--ink-2),var(--ink));overflow:hidden}
.ind-viz::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(148,176,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,176,230,.06) 1px,transparent 1px);background-size:24px 24px;mask:radial-gradient(85% 95% at 50% 25%,#000,transparent 80%)}
.ind-viz::after{content:"";position:absolute;inset:0;background:radial-gradient(280px 150px at 82% -10%,rgba(37,99,235,.30),transparent 60%),radial-gradient(220px 140px at 6% 120%,rgba(16,185,129,.20),transparent 60%);opacity:.9;transition:opacity .45s var(--ease)}
.ind:hover .ind-viz::after{opacity:1.3}
.ivg{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.ivg .dashflow{stroke-dasharray:6 8;animation:dashmove 1.1s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-28}}
.ind-top{display:flex;align-items:center;gap:13px;padding:20px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ind-top .ik{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(150deg,var(--blue),var(--green));color:#fff;flex:none;box-shadow:0 10px 24px -10px var(--blue-glow);transition:transform .45s var(--ease)}
.ind:hover .ind-top .ik{transform:scale(1.08) rotate(-4deg)}
.ind-top .ik svg{width:24px;height:24px}
.ind-top h3{font-size:1.18rem}
.ind-flow{display:grid}
.ind-step{display:flex;gap:14px;padding:17px 26px;align-items:flex-start;position:relative}
.ind-step+.ind-step{border-top:1px dashed var(--line)}
.ind-step .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;width:62px;flex:none;padding-top:2px}
.ind-step.p .lbl{color:#ef7a5f}.ind-step.s .lbl{color:var(--blue)}.ind-step.r .lbl{color:var(--green-600)}
.ind-step p{font-size:.92rem;color:var(--body);line-height:1.5}
.ind-step.r p{color:var(--heading);font-weight:600}

/* ============================================================
   PROCESS timeline
   ============================================================ */
.proc{position:relative}
.proc-line{position:absolute;left:31px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--blue),var(--green));opacity:.25}
.pstep{display:flex;gap:24px;padding:18px 0;position:relative}
.pstep .pn{width:64px;height:64px;border-radius:18px;flex:none;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.3rem;color:#fff;background:linear-gradient(160deg,var(--ink-2),var(--ink-3));border:1px solid var(--d-line);position:relative;z-index:2;box-shadow:var(--sh)}
.pstep .pn span{background:linear-gradient(120deg,#60a5fa,#34d399);-webkit-background-clip:text;background-clip:text;color:transparent}
.pstep .pc{padding-top:8px}
.pstep .pc h3{font-size:1.24rem;margin-bottom:6px}
.pstep .pc p{color:var(--muted);max-width:520px}
.pstep .pc .ptag{font-family:var(--mono);font-size:.66rem;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;display:block}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:0;overflow:hidden;border-radius:var(--r-xl)}
.case-left{padding:44px;display:flex;flex-direction:column}
.case-right{background:linear-gradient(165deg,var(--ink-2),var(--ink));padding:40px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;overflow:hidden}
.case-right::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 300px at 80% 10%,rgba(37,99,235,.25),transparent 60%)}
.case .cs-tag{font-family:var(--mono);font-size:.7rem;color:var(--blue);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.case h3{font-size:1.6rem;margin-bottom:auto}
.csr{margin-top:18px}
.csr .l{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:5px}
.csr.problem .l{color:#ef7a5f}.csr.solution .l{color:var(--blue)}
.csr p{font-size:.96rem;color:var(--body)}
.case-metric{position:relative;z-index:2}
.case-metric .m-num{font-size:2.6rem;font-weight:800;font-family:var(--mono);letter-spacing:-.03em;color:#fff}
.case-metric .m-num span{background:linear-gradient(120deg,#60a5fa,#34d399);-webkit-background-clip:text;background-clip:text;color:transparent}
.case-metric .m-lab{color:var(--d-muted);font-size:.86rem;margin-top:2px}

/* ============================================================
   FINAL CTA — spotlight
   ============================================================ */
.cta{position:relative;background:var(--ink);overflow:hidden;border-radius:var(--r-2xl);padding:88px 64px;text-align:center}
.cta .spotlight{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.35),transparent 65%);pointer-events:none;transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;z-index:1}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 50% 120%,rgba(16,185,129,.18),transparent 60%);z-index:0}
.cta::after{content:"";position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(148,176,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,176,230,.06) 1px,transparent 1px);background-size:48px 48px;mask:radial-gradient(60% 60% at 50% 50%,#000,transparent 75%);z-index:0}
.cta>*{position:relative;z-index:2}
.cta h2{color:#fff;font-size:clamp(2.1rem,4vw,3.2rem)}
.cta .lead{color:#B6C6E0;max-width:600px;margin:18px auto 0}
.cta-btns{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}

/* ---------- page hero (inner) ---------- */
.phero{position:relative;background:var(--ink);color:var(--d-body);padding:150px 0 84px;overflow:hidden;text-align:center}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 50% -10%,rgba(37,99,235,.28),transparent 60%),radial-gradient(500px 400px at 80% 120%,rgba(16,185,129,.14),transparent 60%)}
.phero::after{content:"";position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(148,176,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,176,230,.05) 1px,transparent 1px);background-size:50px 50px;mask:radial-gradient(70% 80% at 50% 30%,#000,transparent 80%)}
.phero .container{position:relative;z-index:2}
.phero h1{color:#fff;font-size:clamp(2.4rem,4.6vw,3.6rem);margin-bottom:18px}
.phero .lead{color:#AFC0DC;max-width:620px;margin:0 auto}
.breadcrumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted);margin-bottom:18px}
.breadcrumb span{color:var(--blue-500)}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero{padding:120px 0 80px}
  .dash{transform:none}
  .stage:hover .dash{transform:none}
  .float-card{display:none}
  .case{grid-template-columns:1fr}
  .case-left{padding:32px}
  .case-right{padding:28px 32px}
  .srow{grid-template-columns:1fr!important}
  .ab-story{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr!important}
}
@media (max-width:640px){
  .hero{padding:96px 0 56px}
  .stage{min-height:320px}
  .dash{border-radius:var(--r-lg);padding:14px}
  .dash-body{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:6px}
  .kpi{padding:9px 10px}
  .kpi .val{font-size:1rem}
  .bars{height:72px}
  .cta{padding:48px 20px}
  .case-left,.case-right{padding:24px 20px}
  .case h3{font-size:1.3rem}
  .hero-meta{gap:18px;margin-top:32px;flex-wrap:wrap}
  .hero-meta .hm b{font-size:1.5rem}
  .hero-meta .hm+.hm{padding-left:0;border-left:none}
  .wf-node{grid-template-columns:44px 1fr}
  .wf-rail .dot{width:44px;height:44px;border-radius:12px}
  .wf-rail .dot svg{width:20px;height:20px}
  .wf-node:not(:last-child) .wf-rail::before{left:22px}
  .wf-card{padding:12px 14px}
  .pstep .pn{width:52px;height:52px;font-size:1.05rem;border-radius:14px}
  .proc-line{left:26px}
  .pstep{gap:18px}
  .about-vals{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:400px){
  .kpis{grid-template-columns:1fr}
  .hero-badge{font-size:.72rem;padding:6px 11px 6px 8px}
  .hero-meta{gap:14px}
  .hero-meta .hm b{font-size:1.35rem}
  .eco{max-width:290px}
  .phero h1{font-size:2rem}
  .feat-review .inner{padding:32px 20px}
}