/* =========================================================
   JIZAI — SINGLE CENTRALIZED STYLESHEET
   Global design tokens + shared components + Home + Services.
   Products and Industries should use these same tokens/components.
========================================================= */

/* =========================================================
   JIZAI DESIGN SYSTEM
   Shared tokens for Home, Services, Products and Industries.
   Change shared typography, spacing, colors and radii here.
========================================================= */
:root{
  /* Brand */
  --jizai-navy:#01195B;
  --jizai-navy-2:#07162f;
  --jizai-navy-3:#0b2246;
  --jizai-navy-4:#0e315b;
  --jizai-purple:#A700F5;
  --jizai-cyan:#3bd6dc;
  --jizai-blue:#4c78ff;
  --jizai-green:#47d4a0;
  --jizai-orange:#ff9167;
  --jizai-white:#fff;

  /* Surfaces / text */
  --jizai-bg:#fff;
  --jizai-light:#f5f8fc;
  --jizai-light-2:#eef3f8;
  --jizai-ink:#0d2342;
  --jizai-text:#071d45;
  --jizai-muted:#6d7f93;
  --jizai-muted-dark:#94a8bd;
  --jizai-line:#dfe6ee;
  --jizai-line-dark:rgba(255,255,255,.08);

  /* Typography */
  --jizai-font:"Poppins",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --jizai-h1:clamp(38px,3.5vw,52px);
  --jizai-home-hero-h1:clamp(70px,7.6vw,116px);
  --jizai-h2:clamp(30px,2.8vw,38px);
  --jizai-h2-small:clamp(28px,2.5vw,34px);
  --jizai-h3:18px;
  --jizai-body-lg:16px;
  --jizai-body:16px;
  --jizai-body-sm:14px;
  --jizai-label:14px;
  --jizai-line-height:1.75;

  /* Layout */
  --jizai-container:1260px;
  --jizai-content:760px;
  --jizai-section-space:96px;
  --jizai-section-space-tablet:82px;
  --jizai-section-space-mobile:64px;
  --jizai-gutter:42px;
  --jizai-gutter-mobile:28px;

  /* Shape */
  --jizai-radius-sm:14px;
  --jizai-radius-md:22px;
  --jizai-radius-lg:30px;
  --jizai-radius-xl:32px;

  /* Effects */
  --jizai-shadow:0 26px 70px rgba(1,25,91,.12);
  --jizai-shadow-dark:0 40px 100px rgba(0,0,0,.32);
  --jizai-gradient:linear-gradient(135deg,var(--jizai-navy),var(--jizai-purple));
  --jizai-gradient-dark:linear-gradient(135deg,#020918 0%,var(--jizai-navy) 58%,#28115d 100%);

  /* Backward-compatible aliases used by approved Home CSS */
  --navy:var(--jizai-navy);
  --navy-2:var(--jizai-navy-2);
  --navy-3:var(--jizai-navy-3);
  --navy-4:var(--jizai-navy-4);
  --cyan:var(--jizai-cyan);
  --blue:var(--jizai-blue);
  --purple:var(--jizai-purple);
  --green:var(--jizai-green);
  --orange:var(--jizai-orange);
  --white:var(--jizai-white);
  --light:var(--jizai-light);
  --light2:var(--jizai-light-2);
  --ink:var(--jizai-ink);
  --muted:var(--jizai-muted);
  --muted-dark:var(--jizai-muted-dark);
  --line:var(--jizai-line);
  --line-dark:var(--jizai-line-dark);
  --shadow:var(--jizai-shadow);
  --shadow-dark:var(--jizai-shadow-dark);
  --r:26px;
}

html{scroll-behavior:smooth}
body{font-family:var(--jizai-font)}

.jizai-container{
  width:min(var(--jizai-container),calc(100% - var(--jizai-gutter)));
  margin-inline:auto;
}
.jizai-service-page .container{max-width:var(--jizai-container)}
.jizai-section{padding:var(--jizai-section-space) 0;position:relative}
.jizai-page-title{font-size:var(--jizai-h1);line-height:1.08;font-weight:500;margin:0}
.jizai-section-title{font-size:var(--jizai-h2);line-height:1.12;font-weight:500;margin:0 0 20px;color:var(--jizai-navy)}
.jizai-section-title--small{font-size:var(--jizai-h2-small)}
.jizai-section-copy{font-size:var(--jizai-body);line-height:var(--jizai-line-height);color:var(--jizai-muted);margin:0}
.jizai-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--jizai-label);font-weight:600;line-height:1.55;color:var(--jizai-purple);margin-bottom:17px}
.jizai-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jizai-gradient)}
.jizai-section-head{max-width:var(--jizai-content);margin-bottom:55px}

.jizai-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;border:0;border-radius:14px;
  font:500 15px/1.2 var(--jizai-font);text-decoration:none;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease
}
.jizai-btn:hover{transform:translateY(-2px)}
.jizai-btn-primary{color:#fff;background:var(--jizai-gradient);box-shadow:0 15px 35px rgba(89,0,197,.22)}
.jizai-btn-primary:hover{color:#fff;box-shadow:0 19px 44px rgba(89,0,197,.3)}
.jizai-btn-light{color:var(--jizai-navy);background:#fff;border:1px solid rgba(255,255,255,.22)}

@media(max-width:1024px){
  :root{--jizai-section-space:var(--jizai-section-space-tablet)}
}
@media(max-width:700px){
  :root{--jizai-section-space:var(--jizai-section-space-mobile);--jizai-gutter:var(--jizai-gutter-mobile)}
}


/* =========================================================
   APPROVED HOME / HEADER / FOOTER STYLES
========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--jizai-font);
  color:var(--ink);
  background:#fff;
  line-height:1.5;
  overflow-x:hidden
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(var(--jizai-container),calc(100% - var(--jizai-gutter)));margin:auto}
.section{padding:var(--jizai-section-space) 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:900;text-transform:uppercase;
  color:var(--blue)
}
.eyebrow:before{content:"";width:30px;height:2px;border-radius:4px;background:currentColor}
.section-title{
  font-size:var(--jizai-h2);
  line-height:.98;
  
  margin:16px 0 20px;
  max-width:930px
}
.section-title.small{font-size:var(--jizai-h2-small)}
.lead{font-size:17px;color:var(--muted);max-width:760px}
.kicker{font-size:12px;color:#8293a8;text-transform:uppercase;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;border-radius:14px;border:0;font-weight:500;
  transition:.25s;cursor:pointer
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#01195B,#A700F5);color:#fff;box-shadow:0 14px 34px rgba(76,120,255,.24)}
.btn-dark{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy)}
.btn-outline{background:transparent;color:#fff;border:1px solid var(--line-dark)}
.arr{transition:.25s}.btn:hover .arr{transform:translateX(4px)}
.reveal{opacity:0;transform:translateY(26px);transition:.8s ease}
.reveal.visible{opacity:1;transform:none}

/* NAV */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(16,35,63,.07)
}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;font-size:20px;color:var(--navy)}
.logo{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--cyan),var(--blue));font-weight:950
}
.nav-links{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:500;color:#40516a}
.nav-links a:hover{color:var(--navy)}
.nav-actions{display:flex;gap:10px;align-items:center}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}

/* HERO */
.hero{
  position:relative;overflow:hidden;
  padding:108px 0 88px;
  min-height:920px;
  background:
    radial-gradient(circle at 50% -5%,rgba(76,120,255,.18),transparent 32%),
    radial-gradient(circle at 82% 12%,rgba(59,214,220,.11),transparent 20%),
    linear-gradient(180deg,#fbfdff 0%,#eef4fb 100%)
}
.hero-gridfx{
  position:absolute;inset:0;opacity:.26;
  background-image:
    linear-gradient(rgba(1,25,91,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,25,91,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,black,transparent 82%)
}
.hero-aurora{
  position:absolute;left:50%;top:230px;transform:translateX(-50%);
  width:780px;height:430px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,214,220,.17),rgba(76,120,255,.09) 46%,transparent 70%);
  filter:blur(20px);animation:aurora 8s ease-in-out infinite alternate
}
@keyframes aurora{from{transform:translateX(-50%) scale(.96)}to{transform:translateX(-50%) scale(1.05)}}
.hero-inner{position:relative;z-index:2;text-align:center}
.hero h1{
  font-size:var(--jizai-home-hero-h1);
  line-height:.87;
  max-width:1110px;margin:18px auto 28px;color:var(--navy)
}
.hero h1 span{
  display:block;
  background:linear-gradient(90deg,var(--navy) 0%,var(--blue) 48%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero .lead{font-size:18px;margin:auto;max-width:700px}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-proof{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:23px;font-size:13px;color:#607186}
.hero-proof span{display:flex;align-items:center;gap:7px}
.check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#e5f8f0;color:#16966a;font-size:11px;font-weight:900}

/* HERO DASHBOARD */
.hero-product{position:relative;margin:76px auto 0;width:min(1140px,100%);min-height:530px}
.product-shadow{
  position:absolute;left:12%;right:12%;bottom:-24px;height:94px;
  background:rgba(76,120,255,.26);filter:blur(54px);border-radius:50%
}
.dashboard{
  position:relative;z-index:2;background:linear-gradient(165deg,#081a36,#0c2a51);
  border:1px solid rgba(255,255,255,.08);border-radius:30px;padding:18px;
  box-shadow:0 46px 115px rgba(1,25,91,.30);transition:.3s
}
.dashboard:hover{transform:translateY(-4px)}
.dashbar{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 16px;color:#8fa6bd;font-size:11px;text-transform:uppercase;}
.window-dots{display:flex;gap:6px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#3b526d}.window-dots i:nth-child(2){background:var(--cyan)}.window-dots i:nth-child(3){background:var(--orange)}
.dash-layout{display:grid;grid-template-columns:205px 1fr;gap:12px}
.sidebar{background:#07162e;border:1px solid rgba(255,255,255,.05);border-radius:17px;padding:14px}
.side-brand{font-size:12px;font-weight:900;margin-bottom:14px;color:#d7e6f4}
.side-link{padding:10px;border-radius:10px;color:#7189a2;font-size:12px;margin-bottom:5px}
.side-link.active{background:#102c50;color:#fff}
.dash-content{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}
.panel{background:#0f2a4b;border:1px solid rgba(255,255,255,.055);border-radius:17px;padding:17px;color:#fff}
.panel h4{margin:0 0 2px;font-size:13px}.small{font-size:11px;color:#7890aa}
.big{font-size:34px;font-weight:900;margin-top:10px}
.delta{font-size:11px;color:#64ddb0}
.chart{height:138px;display:flex;align-items:flex-end;gap:8px;margin-top:18px;border-bottom:1px solid rgba(255,255,255,.06)}
.chart b{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--cyan),#197a92)}
.chart b:nth-child(3n){background:linear-gradient(180deg,var(--purple),#4c43b4)}
.right-stack{display:grid;gap:12px}
.ring{width:106px;height:106px;border-radius:50%;background:conic-gradient(var(--cyan) 0 82%,rgba(255,255,255,.06) 82% 100%);margin:15px auto;position:relative}
.ring:after{content:"82%";position:absolute;inset:11px;border-radius:50%;background:#133556;display:grid;place-items:center;font-size:23px;font-weight:900}
.bottom-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.kpi-box{background:#0d2544;border:1px solid rgba(255,255,255,.05);border-radius:15px;padding:14px;color:#fff}
.kpi-box strong{display:block;font-size:20px;margin-top:7px}
.float{
  position:absolute;z-index:4;background:#fff;color:var(--ink);border-radius:14px;padding:11px 13px;
  box-shadow:0 18px 45px rgba(16,35,63,.16);border:1px solid rgba(16,35,63,.08);
  animation:floatCard 5s ease-in-out infinite
}
.float strong{display:block;font-size:14px}.float small{color:#708196}
.f1{left:18px;top:105px}.f2{right:18px;top:165px;animation-delay:.8s}.f3{left:110px;bottom:-16px;animation-delay:1.4s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* CAPABILITY STRIP */
.cap-strip{
  background:
    radial-gradient(circle at 15% 50%,rgba(76,120,255,.18),transparent 24%),
    radial-gradient(circle at 84% 50%,rgba(59,214,220,.10),transparent 22%),
    var(--navy-2);
  color:#fff;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)
}
.cap-wrap{padding:70px 0}
.cap-head{text-align:center;margin-bottom:32px}
.cap-head h2{font-size:clamp(38px,4vw,54px);margin:0 0 10px;}
.cap-head p{margin:0 auto;color:#91a5bb;max-width:760px;font-size:16px}
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 9%,black 91%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 27s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-item{
  min-width:190px;padding:20px 24px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.028);border-radius:15px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:850;color:#dbe6f3;transition:.25s
}
.marquee-item:hover{transform:translateY(-3px);background:rgba(59,214,220,.06);border-color:rgba(59,214,220,.18)}
.mdot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 14px rgba(59,214,220,.45)}

/* GENERIC LIGHT */
.light{background:#fff}
.light-soft{background:var(--light)}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end}

/* BENTO */
.bento{display:grid;grid-template-columns:1.18fr .82fr;grid-auto-rows:minmax(260px,auto);gap:18px;margin-top:52px}
.bento-card{
  position:relative;border-radius:26px;padding:30px;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(16,35,63,.04)
}
.bento-card.dark{background:linear-gradient(145deg,#071b39,#0c3157);color:#fff;border:0}
.bento-card h3{font-size:32px;line-height:1.05;margin-bottom:12px}
.bento-card p{color:#6f8093;max-width:570px}
.bento-card.dark p{color:#a9bfd2}
.bento-wide{grid-column:1/-1}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.metric{padding:17px;border:1px solid #e3e9f0;border-radius:15px;background:#f8fafc}
.dark .metric{background:#102b4a;border-color:rgba(255,255,255,.06)}
.metric small{display:block;color:#8a98aa;margin-bottom:6px}.metric strong{font-size:25px}
.auto-ui{
  position:relative;width:100%;height:230px;margin-top:26px;border-radius:18px;
  background:linear-gradient(180deg,#fbfdff,#f7faff);border:1px solid #e8edf4;overflow:hidden
}
.auto-ui svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
.auto-box{position:absolute;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid #dfe6ef;font-size:12px;font-weight:800;box-shadow:0 8px 20px rgba(16,35,63,.06);white-space:nowrap;z-index:2}
.auto-box.core{left:50%;top:50%;transform:translate(-50%,-50%);background:var(--blue);color:#fff;border:0}
.auto-box.a{left:7%;top:12%}.auto-box.b{right:7%;top:12%}.auto-box.c{left:8%;bottom:12%}.auto-box.d{right:8%;bottom:12%}
.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.module-card{padding:20px;border-radius:16px;background:#f8fafc;border:1px solid var(--line);transition:.25s}
.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.module-card b{display:block;margin-bottom:6px}.module-card span{font-size:13px;color:#718095}

/* PRODUCT SHOWCASE */
.showcase{background:#fff}
.showcase-top{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:end
}
.showcase-grid{display:grid;grid-template-columns:minmax(300px,.68fr) minmax(0,1.32fr);gap:68px;align-items:center;margin-top:52px}
.showcase-nav{display:grid;gap:12px}
.show-item{
  border:1px solid var(--line);border-radius:17px;padding:19px;background:#f9fbfd;
  cursor:pointer;transition:.25s
}
.show-item.active,.show-item:hover{background:#edf4ff;border-color:#cfe0ff;transform:translateX(4px)}
.show-item b{display:block;margin-bottom:5px;font-size:16px}.show-item span{font-size:13px;color:#718095}
.screen-wrap{position:relative;min-width:0}
.screen{
  min-height:540px;border-radius:30px;background:linear-gradient(165deg,#081a36,#0e335c);
  padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.screen:before{
  content:"";position:absolute;inset:0;opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px
}
.screen-inner{position:relative;z-index:2}
.screen-top{display:flex;justify-content:space-between;align-items:center;color:#9db2c7;font-size:11px;text-transform:uppercase;}
.screen-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);gap:12px;margin-top:16px}
.screen-card{background:#0e2b4b;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px;color:#fff;min-width:0}
.screen-card h4{margin:0 0 4px}.screen-card strong{font-size:36px;display:block;margin-top:10px}
.screen-bars{height:190px;display:flex;align-items:flex-end;gap:8px;margin-top:18px}
.screen-bars i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--cyan),#247f99)}
.screen-bars i:nth-child(3n){background:linear-gradient(180deg,var(--purple),#5141c5)}
.attention{display:grid;gap:10px}
.attention-row{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:12px;background:#103253}
.attention-row span{color:#8ea8bf;font-size:13px}.attention-row b{font-size:13px}
.float-note{
  position:absolute;background:#fff;border-radius:14px;padding:12px 14px;
  box-shadow:0 16px 38px rgba(16,35,63,.15);border:1px solid #e3e9f0;
  animation:floatCard 5s ease-in-out infinite;z-index:4
}
.float-note b{display:block;font-size:14px}.float-note small{color:#708196}
.sn1{left:28px;top:76px}.sn2{right:28px;top:128px;animation-delay:.7s}.sn3{left:115px;bottom:20px;animation-delay:1.3s}

/* DARK EXPLORER */
.explorer{
  background:
    radial-gradient(circle at 72% 20%,rgba(59,214,220,.10),transparent 24%),
    linear-gradient(180deg,#061126,#07172f);
  color:#fff
}
.explorer-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;margin-top:52px}
.tabs{background:#09182f;border:1px solid var(--line-dark);border-radius:22px;padding:12px;height:max-content}
.tab{padding:16px;border-radius:14px;color:#849bb2;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.2s}
.tab.active,.tab:hover{background:#11355d;color:#fff}
.tab span:last-child{font-size:11px;color:#5e7691}
.explorer-view{
  min-height:560px;background:linear-gradient(145deg,#0c2949,#0d3b63);
  border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:28px;position:relative;overflow:hidden
}
.ev-head{display:flex;justify-content:space-between;gap:20px}
.ev-head h3{font-size:38px;margin-bottom:7px}.ev-head p{color:#9db0c4;max-width:680px}
.live-chip{padding:8px 10px;border-radius:999px;font-size:11px;background:rgba(59,214,220,.08);border:1px solid rgba(59,214,220,.16);color:#8fe6e5;height:max-content}
.ev-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:14px;margin-top:26px}
.ev-panel{background:#092540;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:22px;min-width:0}
.ev-panel .big{font-size:44px}
.line-chart{height:185px;position:relative;margin-top:18px;border-bottom:1px solid rgba(255,255,255,.06);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:100% 44px,72px 100%}
.line-chart svg{position:absolute;inset:0;width:100%;height:100%}

/* FLOW */
.flow-section{
  background:
    radial-gradient(circle at 50% 50%,rgba(118,104,255,.13),transparent 31%),
    linear-gradient(180deg,#050b19,#07172f);
  color:#fff;overflow:hidden
}
.flow-wrap{position:relative;min-height:660px;margin-top:50px}
.flow-trail{
  position:absolute;left:-10%;right:-10%;top:225px;height:220px;
  background:linear-gradient(90deg,transparent,rgba(76,120,255,.25),rgba(59,214,220,.19),rgba(118,104,255,.22),transparent);
  filter:blur(20px);transform:skewY(-5deg);animation:trail 7s ease-in-out infinite alternate
}
@keyframes trail{from{transform:skewY(-5deg) translateX(-2%)}to{transform:skewY(-5deg) translateX(2%)}}
.flow-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:170px;height:170px;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:950;
  background:linear-gradient(145deg,#01195B,#A700F5);
  box-shadow:0 0 0 18px rgba(59,214,220,.05),0 0 90px rgba(76,120,255,.24)
}
.flow-node{
  position:absolute;width:230px;padding:18px;border-radius:18px;background:rgba(11,36,68,.94);
  border:1px solid rgba(255,255,255,.08);transition:.25s
}
.flow-node:hover{transform:translateY(-5px);border-color:rgba(59,214,220,.18)}
.flow-node b{display:block;margin-bottom:5px}.flow-node span{font-size:13px;color:#90a7bd}
.fn1{left:3%;top:9%}.fn2{right:5%;top:12%}.fn3{left:6%;bottom:8%}.fn4{right:4%;bottom:8%}
.flow-wrap svg{position:absolute;inset:0;width:100%;height:100%}

/* TRANSFORM */
.transform{background:#fff}
.transform-grid{display:grid;grid-template-columns:1fr 96px 1fr;gap:18px;align-items:center;margin-top:48px}
.transform-card{border-radius:24px;padding:30px;min-height:340px;border:1px solid var(--line)}
.transform-card.before{background:#f7f9fc}
.transform-card.after{background:linear-gradient(145deg,#0b2d53,#0e4d73);color:#fff;border:0}
.transform-card h3{font-size:32px;margin-bottom:12px}
.transform-card p{color:#708196}.transform-card.after p{color:#abc1d5}
.transform-list{display:grid;gap:12px;margin-top:22px}
.transform-item{display:flex;gap:10px;align-items:flex-start}
.tb{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;font-size:12px;font-weight:900;background:#e6ebf2;color:#72839a}
.after .tb{background:rgba(59,214,220,.10);color:#83e4e5}
.transform-arrow{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#01195B,#A700F5);color:#fff;font-size:30px;font-weight:900;box-shadow:0 14px 34px rgba(76,120,255,.22)}

/* IMPLEMENTATION */
.implementation{background:var(--light)}
.impl-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:76px;align-items:center;margin-top:54px}
.timeline{border-left:1px solid #cbd6e2;position:relative}
.timeline:before{content:"";position:absolute;left:-1px;top:0;width:2px;height:0;background:linear-gradient(var(--blue),var(--cyan));transition:height 1.1s ease}
.timeline.active:before{height:100%}
.step{position:relative;padding:0 0 38px 40px}
.step:before{content:"";position:absolute;left:-9px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.step:last-child{padding-bottom:0}
.step h3{margin-bottom:6px;font-size:22px}.step p{color:#718095;margin:0}
.impl-card{min-height:500px;border-radius:28px;background:#081b38;color:#fff;padding:24px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.impl-gridfx{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px}
.impl-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:125px;height:125px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#01195B,#A700F5);font-weight:900}
.impl-node{position:absolute;width:185px;padding:14px;border-radius:14px;background:#102e50;border:1px solid rgba(255,255,255,.07)}
.impl-node b{display:block;margin-bottom:5px}.impl-node span{font-size:12px;color:#91a9bf}
.i1{left:7%;top:12%}.i2{right:7%;top:25%}.i3{left:13%;bottom:18%}.i4{right:15%;bottom:8%}

/* INDUSTRIES */
.industries{background:#fff}
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.industry{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.25s}
.industry:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.industry-visual{height:150px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e9f0ff,#dff7f6)}
.industry-visual:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(1,25,91,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,25,91,.04) 1px,transparent 1px);
  background-size:28px 28px
}
.industry-visual:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(76,120,255,.13);right:-20px;top:-25px}
.industry-body{padding:24px}
.industry-body h3{margin-bottom:8px;font-size:21px}.industry-body p{font-size:14px;color:#6f8093;margin-bottom:12px}
.industry-link{font-size:13px;font-weight:800;color:var(--blue)}

/* WHY JIZAI */
.why{
  background:
    radial-gradient(circle at 80% 20%,rgba(59,214,220,.08),transparent 25%),
    linear-gradient(180deg,#061126,#07172f);
  color:#fff
}
.why-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:16px;margin-top:46px}
.why-card{
  padding:30px;border-radius:24px;background:#0a1b34;border:1px solid var(--line-dark);min-height:250px
}
.why-card.large{min-height:340px;background:linear-gradient(145deg,#0b3158,#0b4a70)}
.why-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(59,214,220,.08);color:#85e5e6;font-weight:900;margin-bottom:36px}
.why-card h3{font-size:28px;margin-bottom:10px}.why-card p{color:#91a7bc}
.why-side{display:grid;gap:16px}

/* CASE */
.case{background:#fff}
.case-card{display:grid;grid-template-columns:1.02fr .98fr;gap:34px;border-radius:28px;background:linear-gradient(145deg,#f2f6fb,#fff);border:1px solid var(--line);padding:34px;margin-top:46px}
.case-card h3{font-size:38px;line-height:1.05;margin-bottom:12px}
.case-visual{min-height:340px;border-radius:22px;background:linear-gradient(145deg,#0b2f56,#0d5279);position:relative;overflow:hidden}
.case-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(59,214,220,.18),transparent 25%)}
.case-ui{position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.case-ui div{padding:14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#fff}
.case-ui span{display:block;font-size:11px;color:#a9bfd2}.case-ui strong{font-size:20px}

/* FAQ */
.faq{background:var(--light)}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:74px;margin-top:42px}
.faq-item{border-bottom:1px solid #d7e0e9}
.faq-q{width:100%;border:0;background:none;padding:24px 0;display:flex;justify-content:space-between;gap:15px;text-align:left;font-weight:850;color:var(--ink);cursor:pointer;font-size:16px}
.faq-a{max-height:0;overflow:hidden;color:#6e7e90;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:180px;padding-bottom:20px}
.plus{transition:.2s}.faq-item.open .plus{transform:rotate(45deg)}

/* CTA */
.cta{
  background:
    radial-gradient(circle at 18% 0%,rgba(59,214,220,.18),transparent 24%),
    radial-gradient(circle at 90% 20%,rgba(118,104,255,.18),transparent 20%),
    linear-gradient(145deg,#061126,#0a2445);
  color:#fff;overflow:hidden
}
.cta-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:76px;align-items:center}
.cta .section-title{font-size:clamp(48px,5vw,70px)}
.form{background:#fff;color:var(--ink);padding:32px;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.24)}
.form h3{font-size:30px;margin-bottom:6px}.form p{color:#6e7f91}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}
label{font-size:12px;font-weight:850}
input,select,textarea{width:100%;padding:13px 14px;border-radius:11px;border:1px solid #dfe6ef;background:#fafbfd;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,120,255,.1)}
textarea{min-height:110px;resize:vertical}
.status{min-height:20px;margin-top:10px;font-size:13px;font-weight:750}

/* FOOTER */
footer{background:#030915;color:#fff;padding:42px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
footer p,footer a{color:#8499b0;font-size:13px}
footer h4{font-size:12px;text-transform:uppercase;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;color:#71879e;font-size:12px}

/* SPOTLIGHT */
.spotlight{position:fixed;z-index:0;width:260px;height:260px;border-radius:50%;pointer-events:none;filter:blur(64px);opacity:.09;background:radial-gradient(circle,var(--cyan),transparent 65%);transform:translate(-50%,-50%)}

/* RESPONSIVE */
@media(max-width:1180px){
  .float-note{display:none}
  .showcase-grid{grid-template-columns:minmax(280px,.74fr) minmax(0,1.26fr);gap:50px}
}
@media(max-width:1020px){
  .nav-links{display:none}.menu-btn{display:block}
  .dash-layout{grid-template-columns:1fr}.sidebar{display:none}
  .intro-grid,.showcase-top,.showcase-grid,.impl-grid,.case-card,.faq-grid,.cta-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.bento-wide{grid-column:auto}
  .explorer-grid{grid-template-columns:1fr}.tabs{display:flex;overflow:auto}.tab{min-width:180px}
  .transform-grid{grid-template-columns:1fr}.transform-arrow{margin:auto;transform:rotate(90deg)}
  .why-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .container{width:min(100% - 28px,1260px)}
  .section{padding:86px 0}
  .hero{padding-top:74px}
  .hero h1{font-size:58px}
  .section-title{font-size:42px}
  .nav-actions .btn-dark{display:none}
  .dash-content,.bottom-stats,.metric-grid,.module-grid,.screen-grid,.ev-grid,.industry-grid,.form-grid{grid-template-columns:1fr}
  .float{display:none}
  .screen{min-height:auto}
  .screen-bars{height:150px}
  .flow-wrap{min-height:780px}
  .flow-node{width:190px}
  .fn1{left:0}.fn2{right:0}.fn3{left:0}.fn4{right:0}
  .case-ui{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:10px}
}

/* =========================================================
   V7 REFINEMENTS — tighter type, stronger rhythm, scroll UX
   ========================================================= */

/* Global typography is intentionally more compact */
.section{padding:108px 0}
.section-title{
  font-size:clamp(38px,4.1vw,56px);
  line-height:1.02;
  
  max-width:700px;
}
.section-title.small{font-size:clamp(32px,3.3vw,44px)}
.lead{font-size:16px;line-height:1.65;max-width:720px}

.hero h1{
  font-size:clamp(60px,6.4vw,94px);
  line-height:.9;
  max-width:980px;
}
.hero .lead{font-size:17px;max-width:760px}

/* Product showcase: prevent 4-line headline and balance both columns */
.showcase-top{
  grid-template-columns:minmax(0,.82fr) minmax(320px,.72fr);
  gap:72px;
  align-items:center;
}
.showcase-top .section-title{
  max-width:700px;
  font-size:clamp(36px,3.7vw,50px);
}
.showcase-top .lead{max-width:520px}

.showcase-grid{
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  align-items:stretch;
}
.showcase-nav{
  height:100%;
  display:grid;
  grid-template-rows:repeat(4,1fr);
}
.show-item{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
}
.screen-wrap{display:flex;align-items:stretch}
.screen{
  min-height:500px;
  height:100%;
}
.screen-grid{
  height:calc(100% - 30px);
}
.screen-card{
  display:flex;
  flex-direction:column;
}
.screen-bars{margin-top:auto;height:165px}

/* Product explorer heading + dashboard more compact */
.explorer .section-title{
  max-width:700px;
  font-size:clamp(36px,3.8vw,50px);
}
.explorer-view{min-height:500px}
.ev-head h3{font-size:34px}
.ev-panel .big{font-size:40px}
.line-chart{height:160px}

/* Flow module nodes are hidden initially and reveal sequentially */
.flow-node{
  opacity:0;
  transform:translateY(24px) scale(.96);
  transition:opacity .55s ease, transform .55s ease, border-color .25s;
}
.flow-node.flow-show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.flow-core{
  opacity:0;
  transform:translate(-50%,-50%) scale(.82);
  transition:opacity .55s ease, transform .55s ease;
}
.flow-core.flow-show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.flow-line{
  stroke-dasharray:8 12;
  stroke-dashoffset:180;
  opacity:.25;
  transition:opacity .45s ease;
}
.flow-wrap.flow-active .flow-line{
  animation:flowDash 4s linear infinite;
  opacity:1;
}
@keyframes flowDash{to{stroke-dashoffset:0}}

/* Sticky stacked Before / After story */
.transform{
  padding-bottom:150px;
}
.transform .section-title{
  max-width:760px;
  font-size:clamp(36px,3.8vw,50px);
}
.transform-stack{
  position:relative;
  width:min(860px,100%);
  margin:52px auto 0;
  min-height:720px;
}
.transform-panel{
  position:sticky;
  top:130px;
  border-radius:28px;
  padding:36px;
  min-height:320px;
  box-shadow:0 24px 70px rgba(1,25,91,.12);
  transform-origin:center top;
}
.transform-panel.before{
  background:#f7f9fc;
  border:1px solid var(--line);
  z-index:1;
}
.transform-panel.after{
  margin-top:150px;
  background:linear-gradient(145deg,#0b2d53,#0e4d73);
  color:#fff;
  z-index:2;
  box-shadow:0 30px 80px rgba(1,25,91,.22);
}
.transform-panel.after p{color:#abc1d5}
.transform-panel h3{font-size:34px;margin-bottom:12px}

/* Implementation scroll stages */
.implementation .section-title{
  max-width:700px;
  font-size:clamp(36px,3.8vw,50px);
}
.step{
  opacity:.45;
  transform:translateX(-8px);
  transition:.35s ease;
}
.step.step-active{
  opacity:1;
  transform:none;
}
.step.step-active h3{color:var(--navy)}
.impl-node{
  opacity:.28;
  transform:translateY(10px);
  transition:.35s ease;
}
.impl-node.impl-active{
  opacity:1;
  transform:none;
  border-color:rgba(59,214,220,.22);
  box-shadow:0 12px 32px rgba(0,0,0,.16);
}

/* Industries get a proper image area that can be replaced later */
.industry-visual{
  height:175px;
  background-size:cover;
  background-position:center;
}
.industry:nth-child(1) .industry-visual{
  background:
    linear-gradient(135deg,rgba(1,25,91,.15),rgba(59,214,220,.18)),
    url('https://images.unsplash.com/photo-1567789884554-0b844b597180?auto=format&fit=crop&w=900&q=60') center/cover;
}
.industry:nth-child(2) .industry-visual{
  background:
    linear-gradient(135deg,rgba(1,25,91,.15),rgba(59,214,220,.15)),
    url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=900&q=60') center/cover;
}
.industry:nth-child(3) .industry-visual{
  background:
    linear-gradient(135deg,rgba(1,25,91,.12),rgba(59,214,220,.12)),
    url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=900&q=60') center/cover;
}
.industry:nth-child(4) .industry-visual{
  background:
    linear-gradient(135deg,rgba(1,25,91,.15),rgba(59,214,220,.15)),
    url('https://images.unsplash.com/photo-1494412519320-aa613dfb7738?auto=format&fit=crop&w=900&q=60') center/cover;
}
.industry:nth-child(5) .industry-visual{
  background:
    linear-gradient(135deg,rgba(1,25,91,.12),rgba(59,214,220,.12)),
    url('https://images.unsplash.com/photo-1522071700081-009f0129c71c?auto=format&fit=crop&w=900&q=60') center/cover;
}
.industry:nth-child(6) .industry-visual{
  background:
    linear-gradient(135deg,rgba(1,25,91,.15),rgba(59,214,220,.15)),
    url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=900&q=60') center/cover;
}

/* Smaller premium headings in lower sections */
.industries .section-title,
.why .section-title,
.case .section-title,
.faq .section-title{
  font-size:clamp(34px,3.6vw,48px);
}

/* CTA is still strong, but no oversized 5-line block */
.cta .section-title{
  font-size:clamp(40px,4.2vw,56px);
  max-width:680px;
}

/* Better section-level whitespace */
.cap-wrap{padding:62px 0}
.cap-head h2{font-size:clamp(34px,3.6vw,46px)}
.bento{margin-top:44px}
.showcase-grid,.explorer-grid,.impl-grid{margin-top:44px}

/* Responsive */
@media(max-width:1020px){
  .showcase-top{grid-template-columns:1fr;gap:18px}
  .showcase-grid{grid-template-columns:1fr}
  .showcase-nav{grid-template-rows:none}
  .transform-stack{min-height:auto}
  .transform-panel{position:relative;top:auto}
  .transform-panel.after{margin-top:18px}
}
@media(max-width:720px){
  .section{padding:78px 0}
  .hero h1{font-size:52px}
  .section-title{font-size:36px}
  .showcase-top .section-title,
  .explorer .section-title,
  .transform .section-title,
  .implementation .section-title,
  .industries .section-title,
  .why .section-title,
  .case .section-title,
  .faq .section-title,
  .cta .section-title{font-size:34px}
  .screen{min-height:auto}
  .flow-wrap{min-height:740px}
}


/* =========================================================
   V8 — typography hierarchy, alignment system, product balance
   ========================================================= */

/* Global hierarchy: smaller, calmer, more premium */
.section{padding:96px 0}
.section-title{
  font-size:clamp(34px,3.6vw,48px);
  line-height:1.04;
  
  max-width:760px;
}
.section-title.small{
  font-size:clamp(28px,2.9vw,38px);
  line-height:1.08;
}
.lead{font-size:16px;line-height:1.65}

.hero{
  padding-top:92px;
  min-height:840px;
}
.hero h1{
  font-size:clamp(56px,5.8vw,86px);
  line-height:.92;
  max-width:900px;
}
.hero .lead{font-size:16px;max-width:720px}
.hero-product{margin-top:60px}

/* Alignment system:
   - centered: hero, capability strip, flow
   - left aligned: product, transformation, implementation, industries, why, case, FAQ
*/
.cap-head,
.flow-section > .container > .eyebrow,
.flow-section > .container > .section-title,
.flow-section > .container > .lead{
  text-align:center;
}
.flow-section > .container > .eyebrow{
  display:flex;
  width:max-content;
  margin-left:auto;
  margin-right:auto;
}
.flow-section > .container > .section-title,
.flow-section > .container > .lead{
  margin-left:auto;
  margin-right:auto;
}

/* Product section headings are deliberately compact and left-aligned */
.showcase-top{
  grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr);
  gap:64px;
  align-items:end;
}
.showcase-top .section-title{
  font-size:clamp(32px,3.3vw,44px);
  max-width:620px;
}
.showcase-top .lead{
  max-width:500px;
  margin-bottom:4px;
}

/* Product screenshot and left navigation must visually match in height */
.showcase-grid{
  grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);
  gap:54px;
  align-items:stretch;
}
.showcase-nav{
  display:grid;
  grid-template-rows:repeat(4,1fr);
  gap:10px;
}
.show-item{
  padding:17px 18px;
  justify-content:center;
}
.screen{
  min-height:0;
  height:100%;
  padding:18px;
}
.screen-wrap{min-height:420px}
.screen-grid{height:calc(100% - 26px)}
.screen-bars{height:145px}

/* No floating overlay cards in the product showcase */
.float-note{display:none!important}

/* Different Teams section: less empty dark canvas, tighter analytics UI */
.explorer{
  padding-top:90px;
  padding-bottom:90px;
}
.explorer .section-title{
  font-size:clamp(32px,3.3vw,44px);
  max-width:650px;
}
.explorer-grid{
  margin-top:36px;
  grid-template-columns:250px minmax(0,1fr);
}
.explorer-view{
  min-height:430px;
  padding:22px;
}
.ev-head h3{font-size:30px}
.ev-grid{margin-top:18px}
.ev-panel{padding:18px}
.ev-panel .big{font-size:36px}
.line-chart{height:125px}

/* Flow: center-aligned visual storytelling */
.flow-section{padding-top:92px;padding-bottom:92px}
.flow-section .section-title{
  font-size:clamp(32px,3.3vw,44px);
  max-width:640px;
}
.flow-section .lead{max-width:650px}
.flow-wrap{min-height:580px;margin-top:34px}

/* Transformation: centered heading, stacked cards below */
.transform > .container > .eyebrow,
.transform > .container > .section-title{
  text-align:center;
}
.transform > .container > .eyebrow{
  display:flex;width:max-content;margin-left:auto;margin-right:auto
}
.transform > .container > .section-title{
  margin-left:auto;margin-right:auto;
  max-width:680px;
  font-size:clamp(32px,3.2vw,43px);
}
.transform-stack{
  width:min(760px,100%);
  margin-top:38px;
  min-height:650px;
}
.transform-panel{
  min-height:280px;
  padding:30px;
}
.transform-panel.after{margin-top:120px}
.transform-panel h3{font-size:29px}

/* =========================================================
   Horizontal implementation journey
   ========================================================= */
.implementation{
  background:var(--light);
  padding:92px 0 0;
}
.impl-intro{
  padding-bottom:30px;
}
.impl-intro .section-title{
  font-size:clamp(32px,3.3vw,44px);
  max-width:660px;
}
.impl-scroll-shell{
  height:320vh;
  position:relative;
}
.impl-pin{
  position:sticky;
  top:80px;
  height:calc(100vh - 80px);
  min-height:620px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(76,120,255,.08),transparent 24%),
    var(--light);
}
.impl-pin-inner{width:100%}
.impl-progress{
  width:100%;
  height:3px;
  border-radius:999px;
  background:#dfe6ee;
  overflow:hidden;
  margin-bottom:34px;
}
.impl-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#01195B,#A700F5);
}
.impl-horizontal{
  width:100%;
  overflow:hidden;
}
.impl-track{
  display:flex;
  gap:20px;
  width:max-content;
  will-change:transform;
}
.impl-step-card{
  width:min(420px,72vw);
  min-height:360px;
  flex:0 0 auto;
  border-radius:24px;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 16px 44px rgba(1,25,91,.07);
  display:flex;
  flex-direction:column;
}
.impl-num{
  width:48px;height:48px;border-radius:14px;
  background:#eaf1ff;color:var(--blue);
  display:grid;place-items:center;
  font-size:14px;font-weight:900;
  margin-bottom:28px;
}
.impl-stage{
  color:var(--blue);
  font-size:11px;
  text-transform:uppercase;
  
  font-weight:900;
  margin-bottom:10px;
}
.impl-step-card h3{
  font-size:27px;
  line-height:1.08;
  
  margin-bottom:12px;
}
.impl-step-card p{
  color:var(--muted);
  font-size:15px;
}
.impl-mini{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:#8090a4;
  font-size:12px;
  font-weight:800;
}

/* Industries: smaller section title, left aligned */
.industries .section-title{
  font-size:clamp(32px,3.3vw,44px);
  max-width:700px;
}

/* Why Jizai: equal-height cards, no large empty block */
.why-head .section-title{
  font-size:clamp(32px,3.3vw,44px);
  max-width:620px;
}
.why-head .lead{color:#91a7bc}
.why-grid-v8{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:38px;
}
.why-card-v8{
  min-height:300px;
  padding:26px;
  border-radius:22px;
  background:#0a1b34;
  border:1px solid var(--line-dark);
  display:flex;
  flex-direction:column;
}
.why-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:44px;
}
.why-top span{
  width:42px;height:42px;border-radius:13px;
  background:rgba(59,214,220,.08);
  color:#85e5e6;
  display:grid;place-items:center;
  font-size:13px;font-weight:900;
}
.why-top i{
  font-style:normal;
  color:#6f89a7;
}
.why-card-v8 h3{
  font-size:24px;
  margin-bottom:10px;
}
.why-card-v8 p{
  color:#91a7bc;
  font-size:14px;
}
.why-tags{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding-top:20px
}
.why-tags span{
  padding:7px 9px;border-radius:999px;
  border:1px solid var(--line-dark);
  color:#9fb1c5;font-size:11px
}

/* Case study: heading clearly above subheading and reduce empty visual */
.case .section-title{
  font-size:clamp(32px,3.3vw,44px);
  max-width:720px;
}
.case-card{
  grid-template-columns:1.05fr .95fr;
  padding:30px;
  align-items:center;
}
.case-card h3{
  font-size:clamp(27px,2.6vw,35px);
  max-width:560px;
}
.case-visual{min-height:270px}

/* FAQ: consistent dark heading color and obvious hierarchy */
.faq-grid{
  grid-template-columns:.72fr 1.28fr;
  gap:68px;
}
.faq .section-title{
  color:var(--ink)!important;
  font-size:clamp(30px,3vw,40px);
  max-width:470px;
}
.faq-q{font-size:15px}
.faq-a{font-size:15px}

/* CTA: strong but not oversized */
.cta .section-title{
  font-size:clamp(36px,3.8vw,50px);
  max-width:590px;
}

/* Responsive */
@media(max-width:1020px){
  .showcase-top{grid-template-columns:1fr;gap:14px}
  .showcase-grid{grid-template-columns:1fr}
  .showcase-nav{grid-template-rows:none}
  .screen-wrap{min-height:auto}
  .screen{height:auto}
  .explorer-grid{grid-template-columns:1fr}
  .why-grid-v8{grid-template-columns:1fr}
  .impl-scroll-shell{height:auto}
  .impl-pin{
    position:relative;top:auto;height:auto;min-height:0;
    padding:30px 0 80px;
  }
  .impl-progress{display:none}
  .impl-horizontal{overflow-x:auto;padding-bottom:8px}
}
@media(max-width:720px){
  .section{padding:74px 0}
  .hero h1{font-size:48px}
  .section-title{font-size:34px}
  .showcase-top .section-title,
  .explorer .section-title,
  .flow-section .section-title,
  .transform > .container > .section-title,
  .impl-intro .section-title,
  .industries .section-title,
  .why-head .section-title,
  .case .section-title,
  .faq .section-title,
  .cta .section-title{font-size:32px}
  .impl-step-card{width:84vw;min-height:330px}
}


/* =========================================================
   V8.2 — DARK IMPLEMENTATION JOURNEY + EARLIER PIN POSITION
   ========================================================= */

/* Entire implementation area gets a premium dark treatment */
.implementation{
  position:relative;
  background:
    radial-gradient(circle at 78% 14%,rgba(59,214,220,.10),transparent 24%),
    radial-gradient(circle at 18% 8%,rgba(76,120,255,.14),transparent 26%),
    linear-gradient(180deg,#061126 0%,#07172f 100%);
  color:#fff;
  padding:88px 0 0;
  overflow:visible;
}

.implementation:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.26;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,black,transparent 76%);
}

.impl-intro{
  position:relative;
  z-index:2;
  padding-bottom:22px;
}

.impl-intro .eyebrow{
  color:#8ce9ec;
}

.impl-intro .section-title{
  color:#fff;
  max-width:650px;
}

.impl-intro .lead{
  color:#96aac0;
  max-width:700px;
}

/* Start the sticky horizontal story a little higher in the viewport */
.impl-scroll-shell{
  height:300vh;
  position:relative;
}

.impl-pin{
  position:sticky;
  top:58px; /* previously 80px — starts higher */
  height:calc(100vh - 58px);
  min-height:620px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 28%,rgba(59,214,220,.07),transparent 24%),
    transparent;
}

.impl-pin:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:rgba(255,255,255,.07);
}

.impl-pin-inner{
  position:relative;
  z-index:2;
}

/* Progress line becomes more visible on dark background */
.impl-progress{
  height:4px;
  background:rgba(255,255,255,.09);
  margin-bottom:28px;
}

.impl-progress span{
  background:linear-gradient(90deg,#01195B,#A700F5);
  box-shadow:0 0 18px rgba(59,214,220,.22);
}

/* Cards: dark glass treatment instead of white */
.impl-step-card{
  width:min(410px,72vw);
  min-height:350px;
  padding:28px;
  background:linear-gradient(180deg,rgba(13,38,72,.94),rgba(9,27,53,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 55px rgba(0,0,0,.22);
  color:#fff;
}

.impl-step-card:hover{
  border-color:rgba(59,214,220,.18);
  transform:translateY(-4px);
  transition:.25s ease;
}

.impl-num{
  background:rgba(76,120,255,.13);
  color:#87a8ff;
  border:1px solid rgba(118,104,255,.12);
}

.impl-stage{
  color:#75dfe3;
}

.impl-step-card h3{
  color:#fff;
  font-size:25px;
}

.impl-step-card p{
  color:#9fb1c5;
}

.impl-mini{
  border-top:1px solid rgba(255,255,255,.08);
  color:#8095ab;
}

/* Slightly tighter spacing so the first card is more fully visible */
.impl-track{
  gap:18px;
  padding-left:8px;
  padding-right:40px;
}

/* Optional visual focus for the card near the center of screen */
.impl-step-card{
  transition:opacity .25s ease, transform .25s ease, border-color .25s ease;
}

/* Tablet/mobile fallback keeps dark background */
@media(max-width:1020px){
  .implementation{
    padding-top:78px;
  }

  .impl-scroll-shell{
    height:auto;
  }

  .impl-pin{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    padding:28px 0 72px;
  }

  .impl-horizontal{
    overflow-x:auto;
    scrollbar-width:thin;
  }

  .impl-step-card{
    min-height:330px;
  }
}


/* =========================================================
   V9 — GLOBAL DESIGN SYSTEM CLEANUP
   Consistent typography, spacing, tabs, cards and alignment
   ========================================================= */

:root{
  /* Typography scale */
  --fs-h1: clamp(58px, 5.6vw, 84px);
  --fs-h2: clamp(36px, 3.3vw, 46px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 15px;
  --fs-body-lg: 16px;
  --fs-tab: 15px;
  --fs-small: 13px;
  --fs-label: 11px;

  /* Font weights */
  --fw-heavy: 850;
  --fw-bold: 760;
  --fw-medium: 600;
  --fw-regular: 450;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;

  /* Spacing */
  --space-section: 94px;
  --space-head: 18px;
  --space-copy: 14px;
  --space-card: 24px;
}

/* Global text hierarchy */
body{
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
}

.hero h1{
  font-size:var(--fs-h1)!important;
  line-height:.94!important;
  
  max-width:920px!important;
  font-weight:var(--fw-heavy)!important;
}

.section{
  padding:var(--space-section) 0!important;
}

.section-title{
  font-size:var(--fs-h2)!important;
  line-height:1.06!important;
  
  max-width:720px!important;
  font-weight:var(--fw-heavy)!important;
  margin:12px 0 16px!important;
}

.section-title.small{
  font-size:clamp(30px,2.8vw,38px)!important;
  line-height:1.08!important;
}

.lead{
  font-size:var(--fs-body-lg)!important;
  line-height:1.65!important;
  font-weight:var(--fw-regular)!important;
  max-width:680px!important;
}

.eyebrow{
  font-size:var(--fs-label)!important;
  font-weight:var(--fw-heavy)!important;
  
}

/* Normalize all h3/h4 card titles */
.bento-card h3,
.ev-head h3,
.transform-panel h3,
.impl-step-card h3,
.industry-body h3,
.why-card-v8 h3,
.case-card h3,
.form h3{
  font-size:var(--fs-h3)!important;
  line-height:1.12!important;
  
  font-weight:var(--fw-bold)!important;
}

.panel h4,
.screen-card h4,
.case-ui strong{
  font-size:var(--fs-h4)!important;
  font-weight:var(--fw-bold)!important;
}

/* Body text consistency */
.bento-card p,
.show-item span,
.ev-head p,
.transform-panel p,
.impl-step-card p,
.industry-body p,
.why-card-v8 p,
.case-card p,
.faq-a,
.form p,
footer p{
  font-size:var(--fs-body)!important;
  line-height:1.62!important;
}

/* Tab system */
.tab,
.show-item,
.side-link{
  font-size:var(--fs-tab)!important;
  font-weight:var(--fw-bold)!important;
}

.tab{
  padding:14px 15px!important;
  border-radius:var(--radius-sm)!important;
}

.tab.active,
.tab:hover{
  background:#11355d!important;
}

.show-item{
  padding:16px 17px!important;
  border-radius:var(--radius-md)!important;
}

.show-item b{
  font-size:var(--fs-tab)!important;
  font-weight:var(--fw-bold)!important;
}

/* Button system */
.btn{
  font-size:14px!important;
  font-weight:500 !important;
  border-radius:12px!important;
  padding:13px 18px!important;
}

/* Cards minimal styling */
.bento-card,
.module-card,
.show-item,
.screen-card,
.ev-panel,
.transform-panel,
.impl-step-card,
.industry,
.why-card-v8,
.case-card,
.form{
  border-radius:var(--radius-lg)!important;
}

.module-card,
.show-item,
.industry{
  box-shadow:none!important;
}

.module-card:hover,
.show-item:hover,
.industry:hover{
  box-shadow:0 14px 34px rgba(1,25,91,.08)!important;
  transform:translateY(-2px)!important;
}

/* Strategic alignment only */

/* Centered sections */
.hero-inner,
.cap-head{
  text-align:center!important;
}

.flow-section > .container > .eyebrow,
.flow-section > .container > .section-title,
.flow-section > .container > .lead{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.flow-section > .container > .eyebrow{
  display:flex!important;
  width:max-content!important;
}

/* Left-aligned sections */
.showcase-top,
.explorer > .container,
.transform > .container,
.impl-intro,
.industries > .container,
.why > .container,
.case > .container,
.faq > .container{
  text-align:left!important;
}

/* Product showcase */
.showcase-top{
  grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr)!important;
  gap:52px!important;
}

.showcase-top .section-title{
  max-width:620px!important;
}

.showcase-top .lead{
  max-width:480px!important;
}

.showcase-grid{
  margin-top:38px!important;
  grid-template-columns:minmax(290px,.74fr) minmax(0,1.26fr)!important;
  gap:46px!important;
}

.showcase-nav{
  gap:10px!important;
}

.screen{
  min-height:390px!important;
  padding:16px!important;
  border-radius:20px!important;
}

.screen-wrap{
  min-height:390px!important;
}

.screen-grid{
  gap:10px!important;
}

.screen-card{
  padding:16px!important;
}

.screen-card strong{
  font-size:34px!important;
}

.screen-bars{
  height:130px!important;
}

/* Different Teams section */
.explorer{
  padding-top:82px!important;
  padding-bottom:82px!important;
}

.explorer .section-title{
  max-width:620px!important;
}

.explorer-grid{
  margin-top:32px!important;
  grid-template-columns:240px minmax(0,1fr)!important;
  gap:20px!important;
}

.tabs{
  border-radius:18px!important;
  padding:10px!important;
}

.explorer-view{
  min-height:405px!important;
  padding:20px!important;
  border-radius:20px!important;
}

.ev-head h3{
  font-size:var(--fs-h3)!important;
}

.ev-grid{
  gap:12px!important;
  margin-top:16px!important;
}

.ev-panel{
  padding:16px!important;
}

.ev-panel .big{
  font-size:34px!important;
}

.line-chart{
  height:115px!important;
}

/* Flow section */
.flow-section{
  padding-top:84px!important;
  padding-bottom:84px!important;
}

.flow-wrap{
  min-height:540px!important;
  margin-top:28px!important;
}

.flow-node{
  width:210px!important;
  padding:15px!important;
  border-radius:16px!important;
}

.flow-node b{
  font-size:16px!important;
  font-weight:var(--fw-bold)!important;
}

.flow-node span{
  font-size:13px!important;
}

/* Transformation */
.transform{
  padding-top:84px!important;
  padding-bottom:120px!important;
}

.transform > .container > .eyebrow,
.transform > .container > .section-title{
  text-align:center!important;
}

.transform > .container > .eyebrow{
  display:flex!important;
  width:max-content!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.transform > .container > .section-title{
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:620px!important;
}

.transform-stack{
  width:min(720px,100%)!important;
  margin-top:34px!important;
}

.transform-panel{
  padding:28px!important;
  min-height:260px!important;
}

.transform-panel.after{
  margin-top:110px!important;
}

.transform-panel h3{
  font-size:22px!important;
}

/* Implementation */
.implementation{
  padding-top:82px!important;
}

.impl-intro .section-title{
  max-width:620px!important;
}

.impl-intro .lead{
  max-width:650px!important;
}

.impl-step-card{
  width:min(390px,70vw)!important;
  min-height:330px!important;
  padding:24px!important;
}

.impl-step-card h3{
  font-size:22px!important;
}

.impl-stage{
  font-size:var(--fs-label)!important;
}

.impl-mini{
  font-size:12px!important;
}

/* Industries */
.industries .section-title{
  max-width:680px!important;
}

.industry-grid{
  gap:14px!important;
  margin-top:34px!important;
}

.industry-body{
  padding:20px!important;
}

.industry-body h3{
  font-size:20px!important;
}

/* Why Jizai */
.why-head .section-title{
  max-width:600px!important;
}

.why-grid-v8{
  margin-top:32px!important;
  gap:12px!important;
}

.why-card-v8{
  min-height:270px!important;
  padding:22px!important;
}

.why-top{
  margin-bottom:30px!important;
}

.why-card-v8 h3{
  font-size:21px!important;
}

/* Case */
.case .section-title{
  max-width:650px!important;
}

.case-card{
  grid-template-columns:1.08fr .92fr!important;
  gap:26px!important;
  padding:26px!important;
}

.case-card h3{
  font-size:26px!important;
  max-width:500px!important;
}

.case-visual{
  min-height:230px!important;
}

/* FAQ */
.faq-grid{
  grid-template-columns:.7fr 1.3fr!important;
  gap:56px!important;
}

.faq .section-title{
  color:var(--ink)!important;
  max-width:420px!important;
  font-size:34px!important;
}

.faq-q{
  font-size:15px!important;
  font-weight:var(--fw-bold)!important;
  padding:20px 0!important;
}

.faq-a{
  font-size:14px!important;
}

/* CTA */
.cta .section-title{
  max-width:560px!important;
}

.form{
  padding:26px!important;
}

.form h3{
  font-size:22px!important;
}

/* Footer consistency */
footer h4{
  font-size:12px!important;
  font-weight:var(--fw-bold)!important;
}

footer a{
  font-size:13px!important;
}

/* Mobile */
@media(max-width:1020px){
  .showcase-top{grid-template-columns:1fr!important;gap:12px!important}
  .showcase-grid{grid-template-columns:1fr!important}
  .explorer-grid{grid-template-columns:1fr!important}
  .faq-grid{grid-template-columns:1fr!important}
}
@media(max-width:720px){
  :root{
    --fs-h1: 46px;
    --fs-h2: 32px;
    --fs-h3: 21px;
    --fs-body: 14px;
    --fs-body-lg: 15px;
    --fs-tab: 14px;
  }

  .section{padding:70px 0!important}
  .hero{padding-top:68px!important}
  .screen{min-height:auto!important}
  .impl-step-card{width:82vw!important;min-height:310px!important}
}


/* =========================================================
   V9.1 — TYPOGRAPHY + SIDEBAR + CARD DENSITY CLEANUP
   Fixes based on the latest UI review
   ========================================================= */

:root{
  --type-h1: clamp(58px,5.4vw,78px);
  --type-h2: clamp(34px,3.2vw,44px);
  --type-h3: 22px;
  --type-h4: 18px;
  --type-nav: 14px;
  --type-body: 15px;
  --type-support: 14px;
  --type-label: 11px;

  --weight-heavy: 700;
  --weight-bold: 700;
  --weight-medium: 560;
  --weight-regular: 430;
}

/* ---------- Core typography ---------- */
body{
  font-size:var(--type-body)!important;
  font-weight:var(--weight-regular)!important;
}

.hero h1{
  font-size:var(--type-h1)!important;
  font-weight:var(--weight-heavy)!important;
  line-height:.94!important;
  
}

.section-title{
  font-size:var(--type-h2)!important;
  font-weight:700 !important;
  line-height:1.06!important;
  
  max-width:700px!important;
}

.section-title.small{
  font-size:clamp(29px,2.7vw,37px)!important;
}

.lead,
.bento-card p,
.ev-head p,
.transform-panel p,
.impl-step-card p,
.industry-body p,
.why-card-v8 p,
.case-card p,
.faq-a,
.form p{
  font-size:var(--type-body)!important;
  font-weight:var(--weight-regular)!important;
  line-height:1.62!important;
  color:var(--muted);
}

.eyebrow{
  font-size:var(--type-label)!important;
  font-weight:var(--weight-bold)!important;
}

/* ---------- Card title hierarchy ---------- */
.bento-card h3,
.ev-head h3,
.transform-panel h3,
.impl-step-card h3,
.industry-body h3,
.why-card-v8 h3,
.case-card h3,
.form h3{
  font-size:var(--type-h3)!important;
  font-weight:var(--weight-bold)!important;
  line-height:1.12!important;
}

.screen-card h4,
.panel h4{
  font-size:var(--type-h4)!important;
  font-weight:var(--weight-bold)!important;
}

/* ---------- Showcase left cards ---------- */
.showcase-nav{
  gap:10px!important;
}

.show-item{
  min-height:94px!important;
  padding:15px 18px!important;
  border-radius:18px!important;
}

.show-item b{
  font-size:15px!important;
  font-weight:var(--weight-bold)!important;
  line-height:1.25!important;
  margin-bottom:6px!important;
}

.show-item span{
  font-size:var(--type-support)!important;
  font-weight:var(--weight-regular)!important;
  line-height:1.45!important;
  color:#718095!important;
}

.show-item.active{
  background:#eef4ff!important;
  border-color:#c9dafb!important;
}

.show-item.active b{
  color:var(--navy)!important;
}

/* ---------- Product explorer tabs ---------- */
.tab{
  min-height:52px!important;
  padding:12px 14px!important;
  border-radius:12px!important;
  font-size:var(--type-nav)!important;
  font-weight:var(--weight-medium)!important;
  color:#8ca3ba!important;
}

.tab span:first-child{
  font-size:var(--type-nav)!important;
  font-weight:var(--weight-medium)!important;
}

.tab span:last-child{
  font-size:12px!important;
  font-weight:var(--weight-medium)!important;
}

.tab.active{
  background:#143d69!important;
  color:#fff!important;
}

.tab.active span:first-child{
  font-weight:var(--weight-bold)!important;
  color:#fff!important;
}

.tab.active span:last-child{
  color:#8aa8c8!important;
}

.tabs{
  padding:9px!important;
  border-radius:18px!important;
}

/* ---------- Hero/dashboard left sidebar ---------- */
.sidebar{
  padding:12px!important;
  border-radius:16px!important;
}

.side-brand{
  font-size:11px!important;
  font-weight:var(--weight-bold)!important;
  
  margin:2px 0 10px!important;
  color:#c9d8e8!important;
}

.side-link{
  padding:8px 10px!important;
  margin-bottom:3px!important;
  border-radius:9px!important;
  font-size:13px!important;
  font-weight:var(--weight-medium)!important;
  color:#8298af!important;
  line-height:1.25!important;
}

.side-link.active{
  background:#11355d!important;
  color:#fff!important;
  font-weight:var(--weight-bold)!important;
}

/* Keep hero KPI notes away from navigation/sidebar */
.f1{
  left:225px!important;
  top:78px!important;
}
.f2{
  right:18px!important;
  top:150px!important;
}
.f3{
  left:255px!important;
  bottom:18px!important;
}

.float{
  padding:10px 12px!important;
  border-radius:12px!important;
}

.float strong{
  font-size:13px!important;
  font-weight:var(--weight-bold)!important;
}

.float small{
  font-size:12px!important;
  font-weight:var(--weight-regular)!important;
}

/* ---------- Product screenshot ---------- */
.screen{
  min-height:365px!important;
}

.screen-card{
  padding:15px!important;
}

.screen-card strong{
  font-size:31px!important;
  font-weight:var(--weight-heavy)!important;
}

.screen-bars{
  height:118px!important;
}

.attention-row{
  padding:10px 11px!important;
  min-height:42px!important;
}

.attention-row span{
  font-size:13px!important;
  font-weight:var(--weight-regular)!important;
}

.attention-row b{
  font-size:13px!important;
  font-weight:700 !important;
}

/* ---------- Explorer analytics height ---------- */
.explorer-view{
  min-height:380px!important;
}

.ev-panel{
  padding:15px!important;
}

.ev-panel .big{
  font-size:32px!important;
}

.line-chart{
  height:100px!important;
}

/* ---------- Case study paragraph ---------- */
.case-card .lead{
  font-size:14px!important;
  font-weight:var(--weight-regular)!important;
  line-height:1.58!important;
  max-width:540px!important;
}

/* ---------- FAQ ---------- */
.faq-q{
  font-size:15px!important;
  font-weight:var(--weight-bold)!important;
}

.faq-a{
  font-size:14px!important;
  font-weight:var(--weight-regular)!important;
  color:#718095!important;
}

/* ---------- Lower dark section ---------- */
.why-card-v8 h3{
  font-size:21px!important;
  font-weight:var(--weight-bold)!important;
}

.why-card-v8 p{
  font-size:14px!important;
  font-weight:var(--weight-regular)!important;
  line-height:1.55!important;
}

/* ---------- General paragraph hard reset ---------- */
p{
  font-weight:var(--weight-regular)!important;
}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .f1,.f2,.f3{display:none!important}
}

@media(max-width:720px){
  :root{
    --type-h1:46px;
    --type-h2:31px;
    --type-h3:20px;
    --type-nav:14px;
    --type-body:14px;
    --type-support:13px;
  }

  .show-item{
    min-height:auto!important;
  }
}


/* =========================================================
   V10 — ZOOMED-OUT / MINIMAL ENTERPRISE DESIGN SYSTEM
   Inspired by the reference's calm typography, spacing and scale
   ========================================================= */

:root{
  /* More restrained typography */
  --v10-h1: clamp(48px,4.5vw,66px);
  --v10-h2: clamp(30px,2.8vw,38px);
  --v10-h3: 20px;
  --v10-card: 16px;
  --v10-body: 14px;
  --v10-support: 13px;
  --v10-tab: 13px;
  --v10-label: 10px;

  --v10-section: 78px;
  --v10-card-pad: 20px;
  --v10-radius: 16px;
}

/* ---------- Overall scale ---------- */
body{
  font-size:var(--v10-body)!important;
  line-height:1.55!important;
}

.container{
  width:min(1180px,calc(100% - 48px))!important;
}

.section{
  padding:var(--v10-section) 0!important;
}

/* ---------- Heading hierarchy ---------- */
.hero h1{
  font-size:var(--v10-h1)!important;
  line-height:.96!important;
  
  max-width:760px!important;
}

.section-title{
  font-size:var(--v10-h2)!important;
  line-height:1.08!important;
  
  max-width:620px!important;
  margin:10px 0 12px!important;
}

.section-title.small{
  font-size:clamp(27px,2.5vw,33px)!important;
}

.lead{
  font-size:var(--v10-body)!important;
  line-height:1.6!important;
  max-width:610px!important;
}

.eyebrow{
  font-size:var(--v10-label)!important;
  
}

/* ---------- Hero spacing ---------- */
.hero{
  padding:74px 0 66px!important;
  min-height:auto!important;
}

.hero .lead{
  font-size:14px!important;
  max-width:650px!important;
}

.hero-actions{
  margin-top:22px!important;
}

.hero-proof{
  margin-top:16px!important;
  gap:18px!important;
  font-size:12px!important;
}

.hero-product{
  margin-top:46px!important;
  width:min(980px,100%)!important;
  min-height:440px!important;
}

.dashboard{
  padding:14px!important;
  border-radius:22px!important;
}

.dash-layout{
  grid-template-columns:175px 1fr!important;
}

.panel{
  padding:14px!important;
  border-radius:13px!important;
}

.big{
  font-size:28px!important;
}

.chart{
  height:105px!important;
}

.ring{
  width:84px!important;
  height:84px!important;
}

.ring:after{
  font-size:18px!important;
}

/* ---------- Capability strip ---------- */
.cap-wrap{
  padding:46px 0!important;
}

.cap-head h2{
  font-size:30px!important;
}

.cap-head p{
  font-size:13px!important;
}

.marquee-item{
  min-width:150px!important;
  padding:14px 16px!important;
  font-size:12px!important;
}

/* ---------- Main light bento ---------- */
.intro-grid{
  gap:42px!important;
}

.bento{
  margin-top:34px!important;
  gap:12px!important;
}

.bento-card{
  padding:20px!important;
  border-radius:18px!important;
}

.bento-card h3{
  font-size:20px!important;
  line-height:1.12!important;
}

.bento-card p{
  font-size:13px!important;
  line-height:1.55!important;
}

.metric-grid{
  gap:8px!important;
  margin-top:18px!important;
}

.metric{
  padding:12px!important;
  border-radius:12px!important;
}

.metric strong{
  font-size:19px!important;
}

.auto-ui{
  height:180px!important;
  margin-top:18px!important;
}

.auto-box{
  font-size:11px!important;
  padding:8px 10px!important;
}

.module-grid{
  gap:8px!important;
  margin-top:18px!important;
}

.module-card{
  padding:14px!important;
  border-radius:12px!important;
}

.module-card b{
  font-size:14px!important;
}

.module-card span{
  font-size:12px!important;
}

/* ---------- Product showcase ---------- */
.showcase-top{
  gap:38px!important;
}

.showcase-top .section-title{
  max-width:540px!important;
}

.showcase-grid{
  margin-top:28px!important;
  grid-template-columns:minmax(500px,.68fr) minmax(0,1.32fr)!important;
  gap:34px!important;
}

.showcase-nav{
  gap:8px!important;
}

.show-item{
  min-height:78px!important;
  padding:12px 14px!important;
  border-radius:14px!important;
}

.show-item b{
  font-size:13px!important;
  margin-bottom:3px!important;
}

.show-item span{
  font-size:12px!important;
  line-height:1.4!important;
}

.screen-wrap{
  min-height:330px!important;
}

.screen{
  min-height:330px!important;
  padding:13px!important;
  border-radius:18px!important;
}

.screen-card{
  padding:13px!important;
  border-radius:14px!important;
}

.screen-card h4{
  font-size:15px!important;
}

.screen-card strong{
  font-size:27px!important;
}

.screen-bars{
  height:92px!important;
}

/* ---------- Product explorer ---------- */
.explorer{
  padding-top:68px!important;
  padding-bottom:68px!important;
}

.explorer-grid{
  margin-top:26px!important;
  grid-template-columns:205px minmax(0,1fr)!important;
  gap:14px!important;
}

.tabs{
  padding:7px!important;
  border-radius:14px!important;
}

.tab{
  min-height:42px!important;
  padding:9px 11px!important;
  font-size:var(--v10-tab)!important;
}

.tab span:first-child{
  font-size:var(--v10-tab)!important;
}

.tab span:last-child{
  font-size:10px!important;
}

.explorer-view{
  min-height:330px!important;
  padding:16px!important;
  border-radius:16px!important;
}

.ev-head h3{
  font-size:20px!important;
}

.ev-head p{
  font-size:12px!important;
  line-height:1.45!important;
}

.ev-grid{
  gap:10px!important;
  margin-top:12px!important;
}

.ev-panel{
  padding:12px!important;
  border-radius:13px!important;
}

.ev-panel .big{
  font-size:28px!important;
}

.line-chart{
  height:82px!important;
}

.attention-row{
  min-height:34px!important;
  padding:8px 9px!important;
}

.attention-row span,
.attention-row b{
  font-size:11px!important;
}

/* ---------- Flow section ---------- */
.flow-section{
  padding:68px 0!important;
}

.flow-wrap{
  min-height:470px!important;
  margin-top:22px!important;
}

.flow-core{
  width:120px!important;
  height:120px!important;
  font-size:14px!important;
}

.flow-node{
  width:175px!important;
  padding:12px!important;
  border-radius:13px!important;
}

.flow-node b{
  font-size:13px!important;
}

.flow-node span{
  font-size:11px!important;
}

/* ---------- Transformation ---------- */
.transform{
  padding-top:68px!important;
  padding-bottom:96px!important;
}

.transform-stack{
  width:min(660px,100%)!important;
  margin-top:26px!important;
}

.transform-panel{
  padding:22px!important;
  min-height:220px!important;
  border-radius:18px!important;
}

.transform-panel.after{
  margin-top:88px!important;
}

.transform-panel h3{
  font-size:19px!important;
}

.transform-panel p,
.transform-item{
  font-size:13px!important;
}

/* ---------- Horizontal implementation ---------- */
.implementation{
  padding-top:68px!important;
}

.impl-intro{
  padding-bottom:16px!important;
}

.impl-scroll-shell{
  height:260vh!important;
}

.impl-pin{
  min-height:560px!important;
}

.impl-progress{
  margin-bottom:22px!important;
}

.impl-step-card{
  width:min(340px,66vw)!important;
  min-height:285px!important;
  padding:20px!important;
  border-radius:16px!important;
}

.impl-num{
  width:40px!important;
  height:40px!important;
  border-radius:11px!important;
  margin-bottom:20px!important;
}

.impl-step-card h3{
  font-size:18px!important;
}

.impl-step-card p{
  font-size:12px!important;
  line-height:1.5!important;
}

.impl-mini{
  font-size:10px!important;
  padding-top:14px!important;
}

/* ---------- Industries ---------- */
.industry-grid{
  margin-top:28px!important;
  gap:10px!important;
}

.industry{
  border-radius:14px!important;
}

.industry-visual{
  height:115px!important;
}

.industry-body{
  padding:14px!important;
}

.industry-body h3{
  font-size:16px!important;
}

.industry-body p{
  font-size:12px!important;
  line-height:1.45!important;
}

.industry-link{
  font-size:11px!important;
  
}

/* ---------- Why Jizai ---------- */
.why-grid-v8{
  margin-top:26px!important;
  gap:10px!important;
}

.why-card-v8{
  min-height:220px!important;
  padding:18px!important;
  border-radius:16px!important;
}

.why-top{
  margin-bottom:22px!important;
}

.why-top span{
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
}

.why-card-v8 h3{
  font-size:17px!important;
}

.why-card-v8 p{
  font-size:12px!important;
  line-height:1.5!important;
}

/* ---------- Case ---------- */
.case-card{
  margin-top:28px!important;
  padding:20px!important;
  gap:20px!important;
  border-radius:18px!important;
}

.case-card h3{
  font-size:21px!important;
}

.case-card .lead{
  font-size:12px!important;
}

.case-visual{
  min-height:190px!important;
  border-radius:15px!important;
}

/* ---------- FAQ ---------- */
.faq-grid{
  gap:38px!important;
}

.faq .section-title{
  font-size:30px!important;
  max-width:370px!important;
}

.faq-q{
  font-size:13px!important;
  padding:16px 0!important;
}

.faq-a{
  font-size:12px!important;
  line-height:1.5!important;
}

/* ---------- CTA ---------- */
.cta-grid{
  gap:50px!important;
}

.cta .section-title{
  font-size:34px!important;
  max-width:480px!important;
}

.form{
  padding:20px!important;
  border-radius:18px!important;
}

.form h3{
  font-size:19px!important;
}

.form p{
  font-size:12px!important;
}

input,select,textarea{
  padding:10px 11px!important;
  font-size:12px!important;
}

textarea{
  min-height:82px!important;
}

/* ---------- Footer ---------- */
footer{
  padding:30px 0 20px!important;
}

footer h4{
  font-size:10px!important;
}

footer p,
footer a{
  font-size:11px!important;
}

/* ---------- Mobile ---------- */
@media(max-width:1020px){
  .container{width:min(100% - 32px,1180px)!important}
  .showcase-grid,
  .explorer-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:720px){
  :root{
    --v10-h1:42px;
    --v10-h2:29px;
    --v10-h3:18px;
    --v10-body:13px;
    --v10-support:12px;
    --v10-tab:12px;
    --v10-section:62px;
  }

  .hero{padding-top:58px!important}
  .hero-product{margin-top:36px!important}
  .flow-wrap{min-height:620px!important}
  .impl-step-card{width:80vw!important}
}


/* =========================================================
   V11 HERO — EXECUTIVE CONTROL ROOM
   Split editorial hero + integrated product UI
   ========================================================= */

.hero-v11{
  position:relative;
  overflow:hidden;
  padding:76px 0 78px!important;
  min-height:auto!important;
  background:
    radial-gradient(circle at 80% 10%,rgba(59,214,220,.12),transparent 22%),
    radial-gradient(circle at 8% 4%,rgba(76,120,255,.10),transparent 24%),
    linear-gradient(180deg,#fbfdff 0%,#f1f5fa 100%)!important;
}

.hero-v11 .hero-gridfx{
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(1,25,91,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,25,91,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black,transparent 86%);
}

.hero-v11-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(30px);
  pointer-events:none;
}
.hero-v11-glow.glow-a{
  width:360px;height:360px;
  right:12%;top:80px;
  background:rgba(59,214,220,.10);
}
.hero-v11-glow.glow-b{
  width:260px;height:260px;
  left:6%;bottom:20px;
  background:rgba(76,120,255,.08);
}

.hero-v11-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:58px;
  align-items:center;
}

.hero-v11-copy{
  text-align:left!important;
}

.hero-v11-copy .eyebrow{
  margin-bottom:18px;
}

.hero-v11-copy h1{
  font-size:clamp(52px,5vw,72px)!important;
  line-height:.96!important;
  
  max-width:650px!important;
  margin:0 0 18px!important;
  color:var(--navy)!important;
  font-weight:700!important;
}

.hero-v11-copy h1 span{
  display:block;
  color:var(--blue)!important;
  background:none!important;
  -webkit-background-clip:initial!important;
}

.hero-v11-copy .lead{
  font-size:15px!important;
  line-height:1.65!important;
  max-width:560px!important;
  margin:0!important;
}

.hero-v11-copy .hero-actions{
  justify-content:flex-start!important;
  margin-top:24px!important;
}

.hero-v11-trust{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-top:18px;
  font-size:12px;
  color:#687a8f;
}
.hero-v11-trust span{
  display:flex;
  align-items:center;
  gap:7px;
}

/* Product composition */
.hero-v11-visual{
  position:relative;
}

.control-shell{
  position:relative;
  border-radius:22px;
  padding:16px;
  background:linear-gradient(160deg,#07192f,#0a2a4d);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 34px 90px rgba(1,25,91,.20);
  overflow:hidden;
}

.control-shell:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
}

.control-top,
.control-grid,
.control-departments{
  position:relative;
  z-index:2;
}

.control-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 2px 13px;
}

.control-top > div:first-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.control-label{
  font-size:9px;
  
  text-transform:uppercase;
  color:#7992ad;
}
.control-top strong{
  font-size:15px;
  color:#fff;
}
.control-live{
  display:flex;
  align-items:center;
  gap:7px;
  color:#9db1c5;
  font-size:11px;
}
.control-live span{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(71,212,160,.5);
}

.control-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);
  gap:10px;
}

.control-main,
.control-status{
  border-radius:15px;
  background:#0d2c4e;
  border:1px solid rgba(255,255,255,.055);
}

.control-main{
  padding:15px;
}

.control-main-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.control-main-head small{
  display:block;
  color:#7e96ae;
  font-size:10px;
}
.control-main-head strong{
  display:block;
  font-size:29px;
  line-height:1;
  color:#fff;
  margin-top:6px;
  
}
.control-main-head em{
  display:block;
  margin-top:6px;
  color:#63ddb0;
  font-style:normal;
  font-size:10px;
}
.control-period{
  padding:6px 8px;
  border-radius:8px;
  background:#123859;
  color:#91a8bd;
  font-size:9px;
}

.control-chart{
  height:145px;
  margin-top:14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:100% 36px,64px 100%;
}
.control-chart svg{
  width:100%;
  height:100%;
}

.control-mini-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}
.control-mini-row div{
  padding:9px 10px;
  border-radius:10px;
  background:#102f50;
  border:1px solid rgba(255,255,255,.04);
}
.control-mini-row span{
  display:block;
  color:#7890a8;
  font-size:9px;
}
.control-mini-row strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:12px;
}

.control-side{
  display:grid;
  gap:10px;
}
.control-status{
  padding:14px;
  text-align:center;
}
.status-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#91a8bd;
  font-size:10px;
}
.status-head b{
  color:#fff;
  font-size:16px;
}
.status-ring{
  width:88px;height:88px;
  border-radius:50%;
  margin:14px auto 10px;
  background:conic-gradient(var(--cyan) 0 82%,rgba(255,255,255,.07) 82% 100%);
  position:relative;
}
.status-ring:after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:#123353;
}
.status-ring span{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  font-size:19px;
}
.control-status small{
  color:#7f97af;
  font-size:9px;
}
.control-status.compact{
  text-align:left;
}
.control-status.compact span{
  color:#7f97af;
  font-size:9px;
}
.control-status.compact strong{
  display:block;
  margin:6px 0 3px;
  font-size:24px;
  color:#fff;
}

.control-departments{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-top:10px;
}
.dept{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.05);
  background:#0b2746;
  border-radius:11px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:.2s ease;
}
.dept:hover,
.dept.active{
  background:#11375d;
  border-color:rgba(59,214,220,.14);
  transform:translateY(-2px);
}
.dept-dot{
  width:8px;height:8px;border-radius:50%;
  flex:0 0 auto;
  background:#667d95;
}
.dept.active .dept-dot{
  background:var(--cyan);
  box-shadow:0 0 11px rgba(59,214,220,.45);
}
.dept b{
  display:block;
  font-size:10px;
  line-height:1.1;
}
.dept small{
  display:block;
  margin-top:2px;
  color:#7f96ad;
  font-size:8px;
}

.hero-v11-caption{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  justify-content:flex-end;
  color:#7b8da1;
  font-size:10px;
}
.caption-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
}

/* Small interactive state change without moving cards */
.control-shell[data-active="sales"] .control-chart path:first-of-type{stroke:#7668ff}
.control-shell[data-active="inventory"] .control-chart path:first-of-type{stroke:#47d4a0}
.control-shell[data-active="people"] .control-chart path:first-of-type{stroke:#ff9167}
.control-shell[data-active="projects"] .control-chart path:first-of-type{stroke:#4c78ff}

/* Tablet */
@media(max-width:1020px){
  .hero-v11-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .hero-v11-copy{
    text-align:center!important;
  }
  .hero-v11-copy h1,
  .hero-v11-copy .lead{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero-v11-copy .hero-actions,
  .hero-v11-trust{
    justify-content:center!important;
  }
}

/* Mobile */
@media(max-width:720px){
  .hero-v11{
    padding:58px 0 60px!important;
  }
  .hero-v11-copy h1{
    font-size:44px!important;
  }
  .control-grid{
    grid-template-columns:1fr;
  }
  .control-departments{
    grid-template-columns:1fr 1fr;
  }
  .control-main-head strong{
    font-size:25px;
  }
  .control-chart{
    height:120px;
  }
  .hero-v11-caption{
    justify-content:center;
  }
}


/* =========================================================
   V12 — PREMIUM MINIMAL FLOW + ANIMATED TECH BACKGROUNDS
   ========================================================= */

/* Calm global rhythm */
.section{
  padding:74px 0!important;
}

.section-title{
  font-size:clamp(29px,2.7vw,36px)!important;
  line-height:1.08!important;
  
  max-width:610px!important;
}

.lead{
  font-size:13px!important;
  line-height:1.6!important;
  max-width:560px!important;
}

.eyebrow{
  font-size:9px!important;
  
}

.bento-card h3,
.ev-head h3,
.transform-panel h3,
.impl-step-card h3,
.industry-body h3,
.why-card-v8 h3,
.form h3{
  font-size:18px!important;
}

p,
.bento-card p,
.ev-head p,
.transform-panel p,
.impl-step-card p,
.industry-body p,
.why-card-v8 p,
.faq-a,
.form p{
  font-size:12px!important;
}

/* =========================================================
   Animated dark section background system
   ========================================================= */
.explorer,
.flow-section,
.implementation,
.why,
.cta{
  position:relative;
  overflow:hidden;
}

.explorer > .container,
.flow-section > .container,
.implementation > *,
.why > .container,
.cta > .container{
  position:relative;
  z-index:3;
}

/* Subtle grid layer */
.explorer:before,
.flow-section:before,
.implementation:before,
.why:before,
.cta:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}

/* Animated light ribbon inspired by the reference, but restrained */
.explorer:after,
.flow-section:after,
.implementation:after,
.why:after,
.cta:after{
  content:"";
  position:absolute;
  width:145%;
  height:220px;
  left:-22%;
  top:38%;
  pointer-events:none;
  opacity:.28;
  filter:blur(18px);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(76,120,255,.06) 18%,
      rgba(59,214,220,.20) 34%,
      rgba(118,104,255,.20) 52%,
      rgba(76,120,255,.15) 68%,
      transparent 88%
    );
  transform:rotate(-8deg) skewX(-18deg);
  animation:v12Ribbon 10s ease-in-out infinite alternate;
}

@keyframes v12Ribbon{
  0%{transform:translateX(-3%) rotate(-8deg) skewX(-18deg) scaleY(.9)}
  100%{transform:translateX(3%) rotate(-5deg) skewX(-14deg) scaleY(1.08)}
}

/* Additional slow glow */
.explorer .container:before,
.flow-section .container:before,
.why .container:before,
.cta .container:before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  right:-110px;
  top:10%;
  background:radial-gradient(circle,rgba(59,214,220,.10),transparent 68%);
  filter:blur(16px);
  pointer-events:none;
  animation:v12Glow 8s ease-in-out infinite alternate;
}
@keyframes v12Glow{
  from{transform:translateY(-10px) scale(.94)}
  to{transform:translateY(18px) scale(1.06)}
}

/* Dark section type remains minimal */
.explorer .section-title,
.flow-section .section-title,
.why .section-title,
.cta .section-title,
.impl-intro .section-title{
  color:#fff!important;
}

.explorer .lead,
.flow-section .lead,
.why .lead,
.cta .lead,
.impl-intro .lead{
  color:#91a6bc!important;
}

/* =========================================================
   Hero stays minimal and controlled
   ========================================================= */
.hero-v11{
  padding:66px 0 66px!important;
}

.hero-v11-copy h1{
  font-size:clamp(46px,4.4vw,62px)!important;
  max-width:580px!important;
}

.hero-v11-copy .lead{
  font-size:13px!important;
  max-width:500px!important;
}

.hero-v11-trust{
  font-size:10px!important;
}

.control-shell{
  border-radius:18px!important;
}

.control-main-head strong{
  font-size:25px!important;
}

.control-chart{
  height:120px!important;
}

.control-departments{
  gap:6px!important;
}

.dept{
  padding:8px!important;
}

.dept b{font-size:9px!important}
.dept small{font-size:7px!important}

/* =========================================================
   Product sections: matching compact hierarchy
   ========================================================= */
.showcase-top .section-title,
.explorer .section-title{
  font-size:clamp(27px,2.5vw,34px)!important;
  max-width:520px!important;
}

.show-item{
  min-height:72px!important;
}

.show-item b,
.tab span:first-child{
  font-size:12px!important;
}

.show-item span{
  font-size:11px!important;
}

.tab{
  font-size:12px!important;
  min-height:38px!important;
}

.explorer-view{
  min-height:310px!important;
}

.ev-head h3{
  font-size:18px!important;
}

.ev-panel .big{
  font-size:26px!important;
}

/* =========================================================
   Case study / outcome section
   ========================================================= */
.case-v12{
  background:#fff;
}

.case-v12-head{
  display:grid;
  grid-template-columns:.92fr .78fr;
  gap:48px;
  align-items:end;
  margin-bottom:28px;
}

.case-v12-head .section-title{
  margin-bottom:0!important;
}

.case-v12-head .lead{
  margin:0 0 2px auto;
  max-width:450px!important;
}

.case-v12-card{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px;
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:#f7f9fc;
}

.case-v12-copy{
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.case-v12-kicker{
  font-size:9px;
  
  text-transform:uppercase;
  color:var(--blue);
  font-weight:800;
  margin-bottom:9px;
  
}

.case-v12-copy h3{
  font-size:22px!important;
  line-height:1.1!important;
  max-width:460px;
  margin-bottom:10px;
}

.case-v12-copy p{
  font-size:12px!important;
  color:#718095;
  max-width:480px;
  margin-bottom:18px;
}

.case-v12-copy .btn{
  width:max-content;
}

.case-v12-visual{
  position:relative;
  min-height:280px;
  border-radius:16px;
  background:
    radial-gradient(circle at 72% 24%,rgba(59,214,220,.15),transparent 28%),
    linear-gradient(145deg,#0b2f56,#0d5279);
  padding:22px;
  overflow:hidden;
}

.case-v12-visual:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:38px 38px;
}

.case-v12-glow{
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-70px;
  top:-80px;
  background:radial-gradient(circle,rgba(59,214,220,.18),transparent 68%);
  animation:v12Glow 7s ease-in-out infinite alternate;
}

.case-v12-title,
.case-v12-outcomes,
.case-v12-flow{
  position:relative;
  z-index:2;
}

.case-v12-title span{
  display:block;
  font-size:9px;
  text-transform:uppercase;
  
  color:#7ea1c0;
}

.case-v12-title strong{
  display:block;
  color:#fff;
  font-size:18px;
  margin-top:5px;
}

.case-v12-outcomes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:28px;
}

.outcome-card{
  min-height:132px;
  border-radius:13px;
  padding:14px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:.25s ease;
}

.outcome-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.10);
  border-color:rgba(59,214,220,.18);
}

.outcome-icon{
  width:32px;
  height:32px;
  border-radius:9px;
  display:grid;
  place-items:center;
  margin-bottom:auto;
  background:rgba(59,214,220,.09);
  color:#7fe3e6;
}

.outcome-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.outcome-card span{
  display:block;
  color:#8fa9c0;
  font-size:9px;
}

.outcome-card strong{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:16px;
}

.case-v12-flow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color:#7f9ab2;
  font-size:9px;
}

.case-v12-flow i{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(59,214,220,.45),rgba(118,104,255,.18));
}

/* =========================================================
   FAQ hierarchy
   ========================================================= */
.faq .section-title{
  font-size:clamp(26px,2.4vw,32px)!important;
  color:var(--ink)!important;
}

.faq-q{
  font-size:12px!important;
}

.faq-a{
  font-size:11px!important;
}

/* =========================================================
   Industries / why / implementation remain visually calm
   ========================================================= */
.industry-body h3,
.why-card-v8 h3,
.impl-step-card h3{
  font-size:16px!important;
}

.industry-body p,
.why-card-v8 p,
.impl-step-card p{
  font-size:11px!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:1020px){
  .case-v12-head,
  .case-v12-card{
    grid-template-columns:1fr;
  }
  .case-v12-head .lead{
    margin-left:0;
  }
}

@media(max-width:720px){
  .section{padding:62px 0!important}
  .section-title{font-size:28px!important}
  .hero-v11-copy h1{font-size:42px!important}
  .case-v12-outcomes{grid-template-columns:1fr}
  .case-v12-visual{min-height:auto}
}


/* =========================================================
   V12.1 — IMPLEMENTATION HORIZONTAL SCROLL FIX
   Dynamic scroll length: no huge blank dark area after cards
   ========================================================= */

.impl-scroll-shell{
  position:relative!important;
  height:auto!important; /* JS calculates the exact required height */
  min-height:0!important;
}

.impl-pin{
  position:sticky!important;
  top:58px!important;
  height:calc(100vh - 58px)!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}

.impl-pin-inner{
  width:100%!important;
}

.impl-horizontal{
  overflow:hidden!important;
  width:100%!important;
}

.impl-track{
  display:flex!important;
  width:max-content!important;
  gap:18px!important;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* Keep the cards vertically centered in the sticky viewport */
.impl-step-card{
  flex:0 0 auto!important;
}

/* Mobile/tablet returns to normal horizontal swipe */
@media(max-width:1020px){
  .impl-scroll-shell{
    height:auto!important;
  }

  .impl-pin{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:28px 0 68px!important;
  }

  .impl-horizontal{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin;
  }

  .impl-track{
    transform:none!important;
  }
}


/* =========================================================
   V12.2 — SMOOTH LEFT-TO-RIGHT IMPLEMENTATION SCROLL
   ========================================================= */

.impl-horizontal{
  overflow:hidden!important;
  position:relative;
}

.impl-track{
  display:flex!important;
  flex-direction:row!important;
  gap:18px!important;
  width:max-content!important;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* Visual direction cue */
.impl-progress{
  position:relative;
}
.impl-progress:after{
  content:"01  →  02  →  03  →  04  →  05";
  position:absolute;
  right:0;
  top:10px;
  color:rgba(255,255,255,.34);
  font-size:9px;
  
  font-weight:700;
  white-space:nowrap;
}

/* Current/nearby cards feel more intentional */
.impl-step-card{
  transition:
    opacity .34s ease,
    transform .34s ease,
    border-color .34s ease,
    box-shadow .34s ease!important;
}

.impl-step-card.is-current{
  opacity:1!important;
  transform:translateY(-4px)!important;
  border-color:rgba(59,214,220,.20)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.24)!important;
}

.impl-step-card.is-near{
  opacity:.82!important;
}

.impl-step-card.is-far{
  opacity:.56!important;
}

@media(max-width:1020px){
  .impl-progress:after{display:none}
  .impl-step-card,
  .impl-step-card.is-current,
  .impl-step-card.is-near,
  .impl-step-card.is-far{
    opacity:1!important;
    transform:none!important;
  }
}


/* V12.3 direction safety */
.impl-horizontal{
  direction:ltr!important;
  justify-content:flex-start!important;
}
.impl-track{
  direction:ltr!important;
  margin-left:0!important;
  margin-right:0!important;
  justify-content:flex-start!important;
  transform:translate3d(0,0,0);
}


/* =========================================================
   V12.4 — HOLD SECTION UNTIL HORIZONTAL JOURNEY IS COMPLETE
   ========================================================= */

.impl-scroll-shell{
  position:relative!important;
  height:auto!important; /* JS calculates exact duration */
}

.impl-pin{
  position:sticky!important;
  top:58px!important;
  height:calc(100vh - 58px)!important;
  min-height:560px!important;
  overflow:hidden!important;
}

/* Give the final card a little breathing room before release */
.impl-track{
  padding-right:90px!important;
}

/* Small completion cue at the end of the progress line */
.impl-progress{
  position:relative;
}
.impl-progress .journey-done{
  position:absolute;
  right:0;
  top:-22px;
  font-size:9px;
  
  text-transform:uppercase;
  color:rgba(255,255,255,.36);
  opacity:0;
  transition:opacity .25s ease;
}
.impl-progress.complete .journey-done{
  opacity:1;
}

@media(max-width:1020px){
  .impl-track{
    padding-right:24px!important;
  }
}


/* =========================================================
   V12.5 — FINAL IMPLEMENTATION HOLD / LAST CARD VISIBILITY FIX
   ========================================================= */

.impl-scroll-shell{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
}

.impl-pin{
  position:sticky!important;
  top:58px!important;
  height:calc(100vh - 58px)!important;
  min-height:560px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
}

/* Keep the visual centered vertically while pinned */
.impl-pin-inner{
  width:100%!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
}

.impl-horizontal{
  width:100%!important;
  overflow:hidden!important;
}

/* Extra right-side room lets step 05 become fully visible before release */
.impl-track{
  display:flex!important;
  flex-direction:row!important;
  width:max-content!important;
  gap:18px!important;
  padding-left:0!important;
  padding-right:220px!important;
  margin:0!important;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* Make sure the last card itself is never clipped */
.impl-step-card:last-child{
  margin-right:0!important;
}

/* Once complete, gently emphasize the last card while the section is held */
.impl-scroll-shell.journey-complete .impl-step-card:last-child{
  opacity:1!important;
  transform:translateY(-5px)!important;
  border-color:rgba(59,214,220,.22)!important;
  box-shadow:0 26px 62px rgba(0,0,0,.26)!important;
}

@media(max-width:1020px){
  .impl-track{
    padding-right:24px!important;
  }
}


/* =========================================================
   V12.6 — ROBUST IMPLEMENTATION PIN
   The next section cannot enter until step 05 is fully shown.
   ========================================================= */

.implementation{
  position:relative!important;
  overflow:visible!important;
}

.impl-scroll-shell{
  position:relative!important;
  min-height:100vh!important;
  height:auto!important; /* exact value set by JS */
}

.impl-pin{
  position:sticky!important;
  top:80px!important; /* sticky header height */
  height:calc(100vh - 80px)!important;
  min-height:calc(100vh - 80px)!important;
  width:100%!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  z-index:5!important;
  background:
    radial-gradient(circle at 75% 25%,rgba(59,214,220,.08),transparent 28%),
    linear-gradient(180deg,#061126,#07172f)!important;
}

.impl-pin-inner{
  width:100%!important;
  position:relative!important;
  z-index:2!important;
}

.impl-horizontal{
  width:100%!important;
  overflow:hidden!important;
}

.impl-track{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  width:max-content!important;
  gap:18px!important;
  padding-left:0!important;
  padding-right:140px!important;
  margin:0!important;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.impl-step-card{
  flex:0 0 auto!important;
}

/* Do not let the next section visually climb over the sticky journey */
.industries{
  position:relative!important;
  z-index:1!important;
}

/* Mobile/tablet: normal swipe, no pinning */
@media(max-width:1020px){
  .impl-scroll-shell{
    height:auto!important;
    min-height:0!important;
  }

  .impl-pin{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:26px 0 60px!important;
  }

  .impl-horizontal{
    overflow-x:auto!important;
  }

  .impl-track{
    transform:none!important;
    padding-right:24px!important;
  }
}


/* =========================================================
   V12.7 — FINAL IMPLEMENTATION SCROLL MODEL
   Uses native horizontal scroll position while the section is pinned.
   The next section appears only after card 05 is fully visible.
   ========================================================= */

.implementation{
  position:relative!important;
  overflow:visible!important;
}

.impl-scroll-shell{
  position:relative!important;
  height:auto!important; /* set precisely in JS */
  min-height:0!important;
}

.impl-pin{
  position:sticky!important;
  top:80px!important;
  height:calc(100vh - 80px)!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  z-index:5!important;
  background:
    radial-gradient(circle at 76% 24%,rgba(59,214,220,.07),transparent 28%),
    linear-gradient(180deg,#061126,#07172f)!important;
}

.impl-pin-inner{
  width:100%!important;
}

.impl-horizontal{
  width:100%!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  scroll-behavior:auto!important;
  scrollbar-width:none;
}

.impl-horizontal::-webkit-scrollbar{
  display:none;
}

.impl-track{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  width:max-content!important;
  gap:18px!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:110px!important;
  transform:none!important;
}

.impl-step-card{
  flex:0 0 auto!important;
}

/* Ensure the last card has proper breathing room when fully reached */
.impl-step-card:last-child{
  margin-right:0!important;
}

.impl-scroll-shell.is-complete .impl-step-card:last-child{
  opacity:1!important;
  transform:translateY(-4px)!important;
  border-color:rgba(59,214,220,.22)!important;
}

/* Keep Industries below the pinned story */
.industries{
  position:relative!important;
  z-index:1!important;
}

@media(max-width:1020px){
  .impl-scroll-shell{
    height:auto!important;
  }

  .impl-pin{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:28px 0 66px!important;
  }

  .impl-horizontal{
    overflow-x:auto!important;
    scroll-snap-type:x proximity;
  }

  .impl-step-card{
    scroll-snap-align:start;
  }

  .impl-track{
    padding-right:24px!important;
  }
}


/* =========================================================
   V12.8 — LOCKED IMPLEMENTATION SLIDER
   Wheel scroll is captured inside this section until 01→05 completes.
   Then normal page scrolling resumes.
   ========================================================= */

.impl-scroll-shell{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
}

.impl-pin{
  position:relative!important;
  top:auto!important;
  height:calc(100vh - 80px)!important;
  min-height:620px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  background:
    radial-gradient(circle at 76% 24%,rgba(59,214,220,.07),transparent 28%),
    linear-gradient(180deg,#061126,#07172f)!important;
}

.impl-horizontal{
  width:100%!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
}

.impl-track{
  display:flex!important;
  flex-direction:row!important;
  gap:18px!important;
  width:max-content!important;
  padding-left:0!important;
  padding-right:90px!important;
  transform:translate3d(0,0,0);
  will-change:transform;
}

/* visual cue while the section has control */
.impl-scroll-shell.is-locked .impl-pin{
  box-shadow:inset 0 0 0 1px rgba(59,214,220,.05);
}

.impl-lock-hint{
  position:absolute;
  right:24px;
  bottom:18px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  color:#8fa6bc;
  font-size:9px;
  
  text-transform:uppercase;
  opacity:.72;
  transition:.25s ease;
}

.impl-scroll-shell.is-complete .impl-lock-hint{
  opacity:0;
  pointer-events:none;
}

.impl-lock-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(59,214,220,.45);
}

/* On touch/tablet, do not trap wheel/touch. Use normal horizontal swipe. */
@media(max-width:1020px){
  .impl-pin{
    height:auto!important;
    min-height:0!important;
    padding:26px 0 64px!important;
  }

  .impl-horizontal{
    overflow-x:auto!important;
    scroll-snap-type:x proximity;
  }

  .impl-step-card{
    scroll-snap-align:start;
  }

  .impl-lock-hint{
    display:none!important;
  }
}


/* V12.9 — slider motion fix */
@media(min-width:1021px){
  .impl-track{
    transform:translate3d(0,0,0);
  }
}


/* V13 — bi-directional journey cue */
.impl-scroll-shell.is-locked .impl-lock-hint{
  opacity:.85;
}
.impl-scroll-shell.is-complete .impl-lock-hint{
  opacity:.72;
}




html,body,button,input,select,textarea{
 font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
.header{position:sticky!important;top:0!important;z-index:999!important}
.nav{height:74px!important;gap:16px!important}
.brand{flex:0 0 auto!important;gap:9px!important;font-size:16px!important;font-weight:700!important}
.logo{width:30px!important;height:30px!important;border-radius:9px!important;font-size:13px!important}
.nav-links{display:flex!important;align-items:center!important;gap:3px!important;margin-left:auto!important;font-size:12px!important;font-weight:500!important}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;padding:10px 8px;border-radius:9px;white-space:nowrap;transition:.2s ease}
.nav-link:hover{background:rgba(76,120,255,.06)}
.nav-chevron{width:12px;height:12px;opacity:.65;transition:.2s ease}
.nav-item:hover .nav-chevron{transform:rotate(180deg)}
.dropdown-panel{position:absolute;top:calc(100% + 12px);left:0;min-width:245px;padding:9px;background:#fff;border:1px solid rgba(13,35,66,.10);border-radius:15px;box-shadow:0 26px 70px rgba(1,25,91,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;z-index:1000}
.nav-item:hover>.dropdown-panel,.nav-item:focus-within>.dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-panel>a{display:block;padding:10px 11px;border-radius:10px;color:#53677e!important;font-size:11px!important;font-weight:500!important}
.dropdown-panel>a:hover{background:#f3f7fc!important;color:#0d2342!important}
.products-menu .mega-panel{width:min(900px,calc(100vw - 48px));left:50%;transform:translate(-43%,8px);padding:18px}
.products-menu:hover .mega-panel,.products-menu:focus-within .mega-panel{transform:translate(-20%,0)}
.mega-header{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding:4px 4px 16px;border-bottom:1px solid rgba(13,35,66,.09);margin-bottom:10px}
.mega-kicker{display:block;color:#3974ef;font-size:9px;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.mega-header strong{display:block;color:#0d2342;font-size:18px;line-height:1.2;font-weight:650}
.mega-header p{max-width:370px;margin:0!important;color:#718399!important;font-size:10px!important;line-height:1.55!important}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mega-item{display:flex!important;align-items:flex-start;gap:10px;min-height:84px;padding:12px!important;border:1px solid transparent;border-radius:12px!important}
.mega-item:hover{background:#f5f8fc!important;border-color:rgba(76,120,255,.12)!important}
.mega-icon{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;background:rgba(76,120,255,.09);color:#4c78ff;font-size:11px;font-weight:700}
.mega-copy b{display:block;color:#183251;font-size:11px;line-height:1.25;font-weight:600;margin-bottom:3px}
.mega-copy small{display:block;color:#718399;font-size:9px;line-height:1.45}
.nav-actions{gap:8px!important;flex:0 0 auto!important}.nav-actions .btn{font-size:11px!important;padding:10px 13px!important}
@media(max-width:1180px){.nav-links{gap:0!important}.nav-link{padding:10px 6px!important;font-size:11px!important}.nav-actions .btn-dark{display:none!important}}
@media(max-width:1020px){
 .nav-links{display:none!important;position:absolute;top:80px;left:16px;right:16px;flex-direction:column!important;align-items:stretch!important;padding:14px;background:#fff;border:1px solid rgba(13,35,66,.10);border-radius:16px;box-shadow:0 25px 70px rgba(1,25,91,.16)}
 .nav-links.open{display:flex!important}.nav-item{width:100%}.nav-link{width:100%;justify-content:space-between;padding:12px!important}
 .dropdown-panel,.products-menu .mega-panel{position:static;width:100%;min-width:0;display:none;opacity:1;visibility:visible;transform:none!important;margin-top:4px;box-shadow:none;background:#f7f9fc}
 .nav-item.mobile-open>.dropdown-panel{display:block}.mega-grid{grid-template-columns:1fr 1fr}.menu-btn{display:block!important}
}
@media(max-width:640px){.mega-grid{grid-template-columns:1fr}.mega-header{display:block}.mega-header p{margin-top:8px!important}}



/* V15.3 — dropdown chevron alignment fix */
.nav-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
}

.nav-chevron{
  width:12px!important;
  height:12px!important;
  display:block!important;
  flex:0 0 12px!important;
  margin:0!important;
  position:relative!important;
  top:0!important;
  transform-origin:center!important;
  transition:transform .2s ease!important;
  color:currentColor!important;
}

.nav-chevron path{
  vector-effect:non-scaling-stroke;
}

.nav-item:hover > .nav-link .nav-chevron,
.nav-item:focus-within > .nav-link .nav-chevron{
  transform:rotate(180deg)!important;
}

@media(max-width:1020px){
  .nav-link{
    display:flex!important;
  }
}



.brand-logo{
  display:block;
  width:auto;
  height:38px;
  max-width:170px;
  object-fit:contain;
}
@media(max-width:640px){
  .brand-logo{height:34px;max-width:150px;}
}

/* WordPress content helpers */
.jizai-wp-content{max-width:900px;margin-top:28px}
.jizai-wp-content h2,.jizai-wp-content h3,.jizai-wp-content h4{color:var(--navy);margin:28px 0 12px}
.jizai-wp-content p,.jizai-wp-content li{color:var(--muted);line-height:1.75}
.jizai-wp-content img{max-width:100%;height:auto;border-radius:18px}
.jizai-post-list{display:grid;gap:18px;margin-top:32px}
.jizai-post-list .bento-card h2{font-size:22px;margin:0 0 10px}


/* =========================================================
   INNER-PAGE TYPOGRAPHY STANDARD
   The approved Home page is the visual master. Inner pages use
   this centralized scale and must not redefine H1/H2/H3 sizes.
========================================================= */
.jizai-service-page .jizai-page-title{font-size:var(--jizai-h1)}
.jizai-service-page .jizai-section-title,
.jizai-service-page .service-cta h2{font-size:var(--jizai-h2)}
.jizai-service-page .service-card h3{font-size:var(--jizai-h3)}

@media(max-width:700px){
  :root{--jizai-h1:38px;--jizai-h2:30px;--jizai-h2-small:28px}
}

/* =========================================================
   SHARED SERVICE PAGE LAYOUTS
   Typography/colors/spacing inherit the centralized tokens above.
========================================================= */
/* =========================================================
   JIZAI SERVICE PAGES
   All service pages share this presentation layer.
========================================================= */
.jizai-service-page{font-family:var(--jizai-font);color:var(--jizai-text);overflow:hidden;background:#fff}
.jizai-service-page *{box-sizing:border-box}
.jizai-service-page h1,.jizai-service-page h2,.jizai-service-page h3,.jizai-service-page p{margin-top:0}
.jizai-service-page a{text-decoration:none}

.service-hero{position:relative;min-height:650px;display:flex;align-items:center;padding:88px 0;background:radial-gradient(circle at 82% 22%,rgba(167,0,245,.28),transparent 26%),radial-gradient(circle at 12% 82%,rgba(65,69,255,.18),transparent 28%),var(--jizai-gradient-dark)}
.service-hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid rgba(255,255,255,.07);right:-180px;top:-170px}
.service-hero-grid{position:relative;z-index:2}
.service-hero .jizai-eyebrow{color:#d9b3ff}
.service-hero .jizai-page-title{color:#fff;max-width:760px;margin-bottom:25px}
.service-hero .jizai-page-title span{background:linear-gradient(90deg,#fff,#d7a7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.service-hero-copy{color:rgba(255,255,255,.76);font-size:var(--jizai-body-lg);line-height:1.8;max-width:670px;margin:0 0 34px}
.service-actions{display:flex;gap:14px;flex-wrap:wrap}
.service-hero-visual{min-height:470px;position:relative}
.service-glass-panel{position:absolute;inset:20px 15px 30px 0;padding:24px;border-radius:28px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(16px);box-shadow:0 35px 90px rgba(0,0,0,.28)}
.service-panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.service-panel-dots{display:flex;gap:6px}.service-panel-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.27)}
.service-panel-label{color:rgba(255,255,255,.62);font-size:12px}
.service-module{padding:18px;border-radius:16px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.08);margin-bottom:13px}
.service-module-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:10px}.service-module-head strong{color:#fff;font-size:14px}.service-module-head span{color:#d6a7ff;font-size:11px}
.service-bar{height:7px;background:rgba(255,255,255,.12);border-radius:100px;overflow:hidden}.service-bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#5867ff,var(--jizai-purple))}
.service-floating-card{position:absolute;right:-20px;bottom:5px;width:220px;padding:19px;background:#fff;border-radius:18px;box-shadow:0 25px 60px rgba(0,0,0,.24)}
.service-floating-card strong{display:block;color:var(--jizai-navy);font-size:14px;margin-bottom:5px}.service-floating-card p{font-size:11px;line-height:1.55;color:var(--jizai-muted);margin:0}

.service-card{padding:28px;border-radius:var(--jizai-radius-md);border:1px solid var(--jizai-line);background:#fff;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.service-card:hover{transform:translateY(-5px);border-color:rgba(167,0,245,.2);box-shadow:0 25px 55px rgba(1,25,91,.09)}
.service-card-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:15px;background:linear-gradient(135deg,rgba(1,25,91,.08),rgba(167,0,245,.1));color:var(--jizai-purple);font-size:17px;font-weight:700;margin-bottom:23px}
.service-card h3{color:var(--jizai-navy);font-size:var(--jizai-h3);line-height:1.45;margin-bottom:12px}.service-card p{color:var(--jizai-muted);font-size:var(--jizai-body-sm);line-height:1.75;margin:0}

.service-light{background:var(--jizai-light)}
.service-visual-box{min-height:540px;padding:36px;border-radius:var(--jizai-radius-lg);background:linear-gradient(145deg,var(--jizai-navy),#431177);position:relative;overflow:hidden;display:flex;align-items:center}
.service-visual-box::after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;border:1px solid rgba(255,255,255,.08);right:-190px;bottom:-160px}
.service-visual-inner{position:relative;z-index:2;width:100%}.service-visual-title{color:#fff;text-align:center;font-size:24px;font-weight:700;margin-bottom:26px}
.service-chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.service-chip{padding:18px 14px;border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);text-align:center;color:#fff;font-size:13px;font-weight:500}
.service-list{display:grid;gap:15px;margin-top:34px}.service-list-item{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:19px 0;border-bottom:1px solid var(--jizai-line)}
.service-list-num{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--jizai-purple);background:rgba(167,0,245,.07);font-size:13px;font-weight:700}.service-list-item h3{color:var(--jizai-navy);font-size:17px;margin-bottom:6px}.service-list-item p{color:var(--jizai-muted);font-size:13px;line-height:1.7;margin:0}

.service-process{background:#020918}.service-process .jizai-section-title{color:#fff}.service-process .jizai-section-copy{color:rgba(255,255,255,.62)}.service-process .jizai-eyebrow{color:#d7a9ff}
.service-process-step{padding:27px 22px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085)}
.service-process-step strong{width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:13px;background:var(--jizai-gradient);margin-bottom:26px}.service-process-step h3{color:#fff;font-size:17px;margin-bottom:9px}.service-process-step p{color:rgba(255,255,255,.58);font-size:12.5px;line-height:1.7;margin:0}

.service-benefit-list{display:grid;gap:20px}.service-benefit{display:grid;grid-template-columns:46px 1fr;gap:16px}.service-benefit-icon{width:43px;height:43px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:rgba(167,0,245,.075);color:var(--jizai-purple);font-weight:700}.service-benefit h3{color:var(--jizai-navy);font-size:17px;margin-bottom:5px}.service-benefit p{color:var(--jizai-muted);font-size:13px;line-height:1.7;margin:0}
.service-stat{padding:30px;border:1px solid var(--jizai-line);background:var(--jizai-light);border-radius:var(--jizai-radius-md)}.service-stat strong{display:block;font-size:30px;color:var(--jizai-navy);margin-bottom:8px}.service-stat span{font-size:13px;color:var(--jizai-muted);line-height:1.5}

.service-faq{background:var(--jizai-light)}.service-faq-wrap{max-width:900px;margin:0 auto}.service-faq .jizai-section-head{margin-left:auto;margin-right:auto;text-align:center}.service-faq-item{background:#fff;border:1px solid var(--jizai-line);border-radius:18px;margin-bottom:13px;overflow:hidden}.service-faq-item summary{cursor:pointer;list-style:none;padding:22px 25px;font-size:16px;font-weight:600;color:var(--jizai-navy)}.service-faq-item summary::-webkit-details-marker{display:none}.service-faq-content{padding:0 25px 22px;color:var(--jizai-muted);font-size:14px;line-height:1.75}

.service-cta{padding:88px 0;background:#fff}.service-cta-box{position:relative;overflow:hidden;padding:70px;border-radius:var(--jizai-radius-xl);background:radial-gradient(circle at 90% 20%,rgba(167,0,245,.3),transparent 28%),linear-gradient(135deg,#020918,var(--jizai-navy) 60%,#351064)}.service-cta-box::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid rgba(255,255,255,.08);right:-120px;top:-130px}.service-cta-content{position:relative;z-index:2;max-width:730px}.service-cta h2{color:#fff;font-size:var(--jizai-h2);line-height:1.12;margin-bottom:18px}.service-cta p{color:rgba(255,255,255,.68);font-size:var(--jizai-body);line-height:1.8;margin-bottom:30px}

@media(max-width:1024px){.service-hero-visual{max-width:650px;width:100%}}
@media(max-width:700px){.service-hero{min-height:auto;padding:75px 0}.service-hero-visual{min-height:430px}.service-chip-grid{grid-template-columns:1fr}.service-cta-box{padding:45px 25px}}


/* Bootstrap integration: structure/responsiveness from Bootstrap, brand treatment from Jizai. */
.jizai-service-page .service-card,.jizai-service-page .service-process-step,.jizai-service-page .service-stat{height:100%}
.jizai-service-page .row{--bs-gutter-x:1.5rem}

/* ==========================================================
   JIZAI MASTER DESIGN SYSTEM v1.6
   Approved Home page is the visual standard.
   Jizai component names are isolated from Bootstrap.
   ========================================================== */
:root{
  --jz-nav-size:14px;
  --jz-body-size:16px;
  --jz-eyebrow-size:14px;
  --jz-h1-size:clamp(42px,4.4vw,58px);
  --jz-h2-size:clamp(30px,2.8vw,38px);
  --jz-h3-size:22px;
  --jz-weight-medium:500;
  --jz-weight-semibold:600;
  --jz-weight-bold:700;
}

/* Header: never depend on Bootstrap .container/.nav/.nav-link/.btn */
.header .jz-header-container{
  width:min(1260px,calc(100% - 40px));
  margin:0 auto;
}
.header .jz-header-inner{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.header .jz-nav-link{
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 8px;
  border-radius:9px;
  white-space:nowrap;
  color:#40516a;
  font-family:'Poppins',sans-serif;
  font-size:var(--jz-nav-size);
  font-weight:var(--jz-weight-medium);
  line-height:1.4;
  text-decoration:none;
  transition:.2s ease;
}
.header .jz-nav-link:hover,
.header .nav-item:hover > .jz-nav-link,
.header .nav-item:focus-within > .jz-nav-link{
  color:#01195B;
  background:rgba(76,120,255,.06);
}
.header .jz-nav-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.header .jz-header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 16px;
  border-radius:14px;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:var(--jz-weight-semibold);
  line-height:1.2;
  text-decoration:none;
  border:0;
  transition:transform .2s ease,box-shadow .2s ease;
}
.header .jz-header-btn:hover{transform:translateY(-1px)}
.header .jz-header-btn-dark{background:#01195B;color:#fff}
.header .jz-header-btn-primary{background:linear-gradient(135deg,#01195B,#A700F5);color:#fff;box-shadow:0 12px 30px rgba(76,120,255,.2)}

/* Website-wide inner-page typography follows approved Home scale */
.jizai-service-page .jizai-page-title{
  font-size:var(--jz-h1-size);
  line-height:1.08;
  font-weight:var(--jz-weight-semibold);
}
.jizai-service-page .jizai-section-title,
.jizai-service-page .service-cta h2{
  font-size:var(--jz-h2-size);
  line-height:1.16;
  font-weight:var(--jz-weight-bold);
}
.jizai-service-page .jizai-card-title,
.jizai-service-page .service-card h3,
.jizai-service-page .service-list-item h3,
.jizai-service-page .service-benefit h3,
.jizai-service-page .service-step h3{
  font-size:var(--jz-h3-size);
  line-height:1.3;
  font-weight:var(--jz-weight-semibold);
}
.jizai-service-page .jizai-section-copy,
.jizai-service-page .service-hero-copy{
  font-size:var(--jz-body-size);
  line-height:1.7;
  font-weight:400;
}
.jizai-service-page .jizai-eyebrow{
  font-size:var(--jz-eyebrow-size);
  line-height:1.5;
  font-weight:var(--jz-weight-semibold);
}

@media(max-width:1180px){
  .header .jz-nav-link{padding:10px 6px;font-size:12px}
  .header .jz-header-btn-dark{display:none}
}
@media(max-width:1020px){
  .header .nav-links{display:none!important;position:absolute;top:80px;left:16px;right:16px;flex-direction:column!important;align-items:stretch!important;padding:14px;background:#fff;border:1px solid rgba(13,35,66,.10);border-radius:16px;box-shadow:0 25px 70px rgba(1,25,91,.16)}
  .header .nav-links.open{display:flex!important}
  .header .nav-item{width:100%}
  .header .jz-nav-link{width:100%;justify-content:space-between;padding:12px!important;font-size:14px}
}
@media(max-width:767px){
  :root{--jz-h1-size:38px;--jz-h2-size:30px;--jz-h3-size:19px;--jz-body-size:15px}
  .header .jz-header-container{width:calc(100% - 28px)}
  .header .jz-header-btn{display:none}
}

/* =========================================================
   v1.7 HOME-MASTER ALIGNMENT
   Approved Home page is the visual master for every inner page.
   Inner pages inherit the same compact type rhythm and density.
   ========================================================= */
:root{
  --jz-inner-h1-size:clamp(40px,3.7vw,52px);
  --jz-inner-h2-size:clamp(27px,2.15vw,32px);
  --jz-inner-h3-size:18px;
  --jz-inner-section-space:82px;
}
.jizai-service-page .jizai-page-title{
  font-size:var(--jz-inner-h1-size);
  line-height:1.08;
  font-weight:600;
}
.jizai-service-page .jizai-section{
  padding:var(--jz-inner-section-space) 0;
}
.jizai-service-page .jizai-section-head{
  margin-bottom:30px;
}
.jizai-service-page .jizai-section-title,
.jizai-service-page .service-cta h2{
  font-size:var(--jz-inner-h2-size);
  line-height:1.16;
  font-weight:700;
  margin-bottom:12px;
}
.jizai-service-page .jizai-section-copy{
  max-width:760px;
  margin-bottom:0;
}
.jizai-service-page .jizai-eyebrow{
  margin-bottom:12px;
}
.jizai-service-page .service-card{
  padding:24px;
}
.jizai-service-page .service-card-icon{
  margin-bottom:18px;
}
.jizai-service-page .service-process-step{
  padding:23px 20px;
}
.jizai-service-page .service-process-step strong{
  margin-bottom:20px;
}
.jizai-service-page .service-stat{
  padding:24px;
}
.jizai-service-page .service-list{
  margin-top:26px;
}
.jizai-service-page .service-list-item{
  padding:15px 0;
}
.jizai-service-page .service-hero-copy{
  max-width:650px;
}
@media(max-width:767px){
  :root{
    --jz-inner-h1-size:38px;
    --jz-inner-h2-size:28px;
    --jz-inner-h3-size:18px;
    --jz-inner-section-space:64px;
  }
}