/* =========================================================
   ZALWEB HOME V2
   Enterprise Product Experience
   ========================================================= */

.zwh-hero{
  --zwh-navy:#031a36;
  --zwh-navy-2:#06294f;
  --zwh-blue:#075ea7;
  --zwh-green:#00bfae;
  --zwh-green-soft:#dffaf6;
  --zwh-text:#10233d;
  --zwh-muted:#637287;
  --zwh-line:#dce7f1;

  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 14% 14%,rgba(0,191,174,.12),transparent 30%),
    radial-gradient(circle at 88% 2%,rgba(7,94,167,.10),transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f7fafc 100%);
}

.zwh-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(3,26,54,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,54,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 86%);
}

.zwh-hero::after{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  left:-260px;
  bottom:-330px;
  z-index:-1;
  border-radius:50%;
  border:1px solid rgba(0,191,174,.13);
  box-shadow:
    0 0 0 70px rgba(0,191,174,.025),
    0 0 0 140px rgba(7,94,167,.018);
}

.zwh-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwh-hero-main{
  min-height:720px;
  padding:82px 0 58px;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(540px,1.12fr);
  gap:68px;
  align-items:center;
}

.zwh-copy{
  position:relative;
  z-index:2;
}

.zwh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:34px;
  margin-bottom:24px;
  padding:7px 12px;
  border:1px solid rgba(0,191,174,.24);
  background:rgba(255,255,255,.76);
  color:var(--zwh-blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  direction:ltr;
  backdrop-filter:blur(10px);
}

.zwh-eyebrow-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--zwh-green);
  box-shadow:0 0 0 5px rgba(0,191,174,.11);
}

.zwh-title{
  max-width:690px;
  margin:0;
  color:var(--zwh-navy);
  font-size:clamp(42px,4.7vw,68px);
  font-weight:900;
  line-height:1.38;
  letter-spacing:-1.7px;
}

.zwh-title strong{
  position:relative;
  color:var(--zwh-blue);
  font-weight:900;
}

.zwh-title strong::after{
  content:"";
  position:absolute;
  right:0;
  left:0;
  bottom:2px;
  height:8px;
  z-index:-1;
  background:rgba(0,191,174,.18);
}

.zwh-lead{
  max-width:650px;
  margin:24px 0 0;
  color:var(--zwh-muted);
  font-size:17px;
  line-height:2.15;
}

.zwh-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.zwh-btn{
  min-height:52px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--zwh-line);
  background:#fff;
  color:var(--zwh-navy);
  font-size:14px;
  font-weight:900;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.zwh-btn:hover{
  transform:translateY(-2px);
  border-color:#b8cadb;
  box-shadow:0 14px 34px rgba(3,26,54,.08);
}

.zwh-btn-primary{
  border-color:var(--zwh-green);
  background:var(--zwh-green);
  color:#03243e;
  box-shadow:0 16px 34px rgba(0,191,174,.20);
}

.zwh-btn-primary:hover{
  border-color:#00a999;
  background:#00b5a5;
  box-shadow:0 18px 40px rgba(0,191,174,.26);
}

.zwh-arrow{
  font-size:17px;
  line-height:1;
  direction:ltr;
}

.zwh-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:28px;
  padding:0;
  list-style:none;
}

.zwh-proof li{
  display:flex;
  align-items:center;
  gap:8px;
  color:#506176;
  font-size:12px;
  font-weight:800;
}

.zwh-proof li::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  background:var(--zwh-green);
}

/* ---------------- PRODUCT PREVIEW ---------------- */

.zwh-product{
  position:relative;
  direction:ltr;
}

.zwh-product::before{
  content:"";
  position:absolute;
  inset:10% 4% -10%;
  z-index:-1;
  border-radius:50%;
  background:rgba(7,94,167,.12);
  filter:blur(70px);
}

.zwh-app{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(3,26,54,.10);
  background:#fff;
  box-shadow:
    0 44px 100px rgba(3,26,54,.18),
    0 8px 28px rgba(3,26,54,.08);
}

.zwh-app-top{
  height:54px;
  padding:0 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid #e8eef4;
  background:#fff;
}

.zwh-app-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--zwh-navy);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
}

.zwh-app-mark{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--zwh-green),var(--zwh-blue));
  color:#fff;
  font-size:9px;
  font-weight:900;
}

.zwh-demo{
  display:flex;
  align-items:center;
  gap:7px;
  color:#738094;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.zwh-demo::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--zwh-green);
}

.zwh-app-body{
  min-height:438px;
  display:grid;
  grid-template-columns:132px 1fr;
}

.zwh-sidebar{
  padding:18px 12px;
  border-right:1px solid #e8eef4;
  background:#f8fafc;
}

.zwh-side-label{
  display:block;
  margin:0 8px 12px;
  color:#9aa5b3;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.zwh-navitem{
  min-height:34px;
  margin-bottom:5px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#69778a;
  font-size:9px;
  font-weight:800;
}

.zwh-navitem::before{
  content:"";
  width:7px;
  height:7px;
  border:1px solid #aebac7;
}

.zwh-navitem.active{
  background:#eaf7f5;
  color:#075b70;
}

.zwh-navitem.active::before{
  border-color:var(--zwh-green);
  background:var(--zwh-green);
}

.zwh-workspace{
  padding:22px;
  background:#fbfcfd;
}

.zwh-work-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.zwh-work-head small{
  display:block;
  margin-bottom:4px;
  color:#8b97a7;
  font-size:9px;
  font-weight:800;
}

.zwh-work-head strong{
  display:block;
  color:var(--zwh-navy);
  font-size:16px;
  font-weight:900;
}

.zwh-live{
  padding:6px 9px;
  background:#e7f8f5;
  color:#007d72;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.zwh-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-bottom:12px;
}

.zwh-kpi{
  min-height:74px;
  padding:12px;
  border:1px solid #e5ecf3;
  background:#fff;
}

.zwh-kpi span{
  display:block;
  margin-bottom:8px;
  color:#8a96a6;
  font-size:8px;
  font-weight:800;
}

.zwh-kpi b{
  display:block;
  color:var(--zwh-navy);
  font-size:18px;
  line-height:1;
}

.zwh-kpi em{
  display:block;
  margin-top:8px;
  color:#00a692;
  font-size:7px;
  font-style:normal;
  font-weight:900;
}

.zwh-dashboard-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:10px;
}

.zwh-panel{
  min-height:145px;
  padding:14px;
  border:1px solid #e5ecf3;
  background:#fff;
}

.zwh-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px;
}

.zwh-panel-head strong{
  color:#31435a;
  font-size:9px;
  font-weight:900;
}

.zwh-panel-head span{
  color:#9aa4b1;
  font-size:7px;
}

.zwh-bars{
  height:86px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding-top:6px;
  border-bottom:1px solid #edf1f5;
}

.zwh-bars i{
  flex:1;
  min-width:7px;
  background:linear-gradient(to top,#075ea7,#00bfae);
  opacity:.88;
}

.zwh-bars i:nth-child(1){height:38%}
.zwh-bars i:nth-child(2){height:52%}
.zwh-bars i:nth-child(3){height:43%}
.zwh-bars i:nth-child(4){height:68%}
.zwh-bars i:nth-child(5){height:59%}
.zwh-bars i:nth-child(6){height:82%}
.zwh-bars i:nth-child(7){height:74%}
.zwh-bars i:nth-child(8){height:91%}

.zwh-flow{
  display:grid;
  gap:8px;
}

.zwh-flow-row{
  display:grid;
  grid-template-columns:58px 1fr 28px;
  gap:8px;
  align-items:center;
}

.zwh-flow-row span{
  color:#6e7c8f;
  font-size:7px;
  font-weight:800;
}

.zwh-track{
  height:5px;
  overflow:hidden;
  background:#eef2f6;
}

.zwh-track i{
  height:100%;
  display:block;
  background:var(--zwh-green);
}

.zwh-flow-row b{
  color:#34465c;
  font-size:7px;
  text-align:right;
}

.zwh-ai-card{
  grid-column:1/-1;
  min-height:82px;
  padding:13px 15px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(0,191,174,.22);
  background:
    linear-gradient(135deg,rgba(0,191,174,.07),rgba(7,94,167,.035));
}

.zwh-ai-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:var(--zwh-navy);
  color:#fff;
  font-size:8px;
  font-weight:950;
}

.zwh-ai-copy strong{
  display:block;
  margin-bottom:4px;
  color:var(--zwh-navy);
  font-size:9px;
}

.zwh-ai-copy span{
  display:block;
  color:#708095;
  font-size:7px;
  line-height:1.7;
}

.zwh-ai-state{
  padding:6px 8px;
  background:#fff;
  color:#008d80;
  border:1px solid rgba(0,191,174,.20);
  font-size:7px;
  font-weight:900;
}

.zwh-product-strip{
  border-top:1px solid rgba(3,26,54,.08);
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(10px);
}

.zwh-product-strip-inner{
  min-height:72px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:36px;
}

.zwh-strip-label{
  color:#8390a1;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
  white-space:nowrap;
}

.zwh-strip-items{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.zwh-strip-items span{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-right:1px solid rgba(3,26,54,.07);
  color:#344960;
  font-size:11px;
  font-weight:900;
  direction:ltr;
}

.zwh-strip-items span:last-child{
  border-left:1px solid rgba(3,26,54,.07);
}

/* ---------------- ACCESSIBILITY ---------------- */

.zwh-btn:focus-visible{
  outline:3px solid rgba(0,191,174,.32);
  outline-offset:3px;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:1100px){
  .zwh-hero-main{
    grid-template-columns:1fr;
    gap:50px;
    padding-top:68px;
  }

  .zwh-copy{
    max-width:780px;
  }

  .zwh-title{
    max-width:780px;
  }

  .zwh-product{
    width:min(760px,100%);
    margin-inline:auto;
  }
}

@media(max-width:760px){
  .zwh-shell{
    width:min(100% - 28px,1240px);
  }

  .zwh-hero-main{
    min-height:auto;
    padding:52px 0 42px;
    gap:38px;
  }

  .zwh-title{
    font-size:clamp(34px,10vw,48px);
    line-height:1.48;
    letter-spacing:-.9px;
  }

  .zwh-lead{
    margin-top:18px;
    font-size:15px;
  }

  .zwh-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .zwh-btn{
    width:100%;
  }

  .zwh-app-body{
    grid-template-columns:1fr;
  }

  .zwh-sidebar{
    display:none;
  }

  .zwh-workspace{
    padding:14px;
  }

  .zwh-kpis{
    grid-template-columns:1fr 1fr;
  }

  .zwh-dashboard-grid{
    grid-template-columns:1fr;
  }

  .zwh-ai-card{
    grid-column:auto;
  }

  .zwh-product-strip-inner{
    display:block;
    padding:20px 0;
  }

  .zwh-strip-label{
    display:block;
    margin-bottom:14px;
    text-align:center;
  }

  .zwh-strip-items{
    grid-template-columns:1fr 1fr;
  }

  .zwh-strip-items span{
    min-height:44px;
    border:1px solid rgba(3,26,54,.07);
    margin:-1px 0 0 -1px;
  }
}

@media(max-width:430px){
  .zwh-kpis{
    grid-template-columns:1fr 1fr;
  }

  .zwh-kpi{
    min-height:68px;
    padding:10px;
  }

  .zwh-kpi b{
    font-size:16px;
  }

  .zwh-app-top{
    padding-inline:12px;
  }

  .zwh-work-head{
    align-items:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .zwh-btn{
    transition:none;
  }
}

/* =========================================================
   ZALWEB CONNECTED OPERATIONS V2
   ========================================================= */

.zwc{
  position:relative;
  padding:118px 0;
  overflow:hidden;
  background:#fff;
}

.zwc::before{
  content:"";
  position:absolute;
  top:0;
  right:50%;
  width:min(1240px,calc(100% - 48px));
  height:1px;
  transform:translateX(50%);
  background:linear-gradient(
    90deg,
    transparent,
    #dce7f1 15%,
    #dce7f1 85%,
    transparent
  );
}

.zwc-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwc-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);
  gap:82px;
  align-items:center;
}

.zwc-copy{
  max-width:560px;
}

.zwc-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
  color:#075ea7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  direction:ltr;
}

.zwc-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:#00bfae;
}

.zwc h2{
  margin:0;
  color:#031a36;
  font-size:clamp(34px,3.5vw,52px);
  font-weight:900;
  line-height:1.55;
  letter-spacing:-1px;
}

.zwc-lead{
  margin:22px 0 0;
  color:#66768a;
  font-size:16px;
  line-height:2.15;
}

.zwc-points{
  display:grid;
  gap:0;
  margin-top:34px;
  border-top:1px solid #e4ebf2;
}

.zwc-point{
  position:relative;
  padding:20px 42px 20px 0;
  border-bottom:1px solid #e4ebf2;
}

.zwc-point::before{
  content:"";
  position:absolute;
  right:0;
  top:27px;
  width:18px;
  height:18px;
  border:1px solid rgba(0,191,174,.38);
  background:rgba(0,191,174,.08);
}

.zwc-point::after{
  content:"";
  position:absolute;
  right:5px;
  top:32px;
  width:8px;
  height:8px;
  background:#00bfae;
}

.zwc-point strong{
  display:block;
  margin-bottom:5px;
  color:#132b48;
  font-size:14px;
  font-weight:900;
}

.zwc-point span{
  display:block;
  color:#738196;
  font-size:12px;
  line-height:1.9;
}

/* ---------------- ARCHITECTURE VISUAL ---------------- */

.zwc-visual{
  position:relative;
  min-height:510px;
  direction:ltr;
}

.zwc-board{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid #dae5ef;
  background:
    linear-gradient(rgba(3,26,54,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,54,.035) 1px,transparent 1px),
    #f9fbfd;
  background-size:52px 52px;
  box-shadow:0 28px 80px rgba(3,26,54,.08);
}

.zwc-board-head{
  height:58px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e5ecf2;
  background:rgba(255,255,255,.90);
}

.zwc-board-head strong{
  color:#18324f;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
}

.zwc-board-head span{
  padding:6px 9px;
  border:1px solid rgba(0,191,174,.22);
  background:#ebfaf8;
  color:#008d80;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.zwc-board-body{
  position:relative;
  height:450px;
}

.zwc-core{
  position:absolute;
  top:50%;
  left:50%;
  width:168px;
  height:168px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,#0a69ae,#031a36 70%);
  color:#fff;
  box-shadow:
    0 26px 60px rgba(3,26,54,.28),
    0 0 0 20px rgba(0,191,174,.045),
    0 0 0 42px rgba(7,94,167,.035);
}

.zwc-core-inner small{
  display:block;
  margin-bottom:7px;
  color:#72e6da;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}

.zwc-core-inner b{
  display:block;
  font-size:22px;
  font-weight:950;
  letter-spacing:.06em;
}

.zwc-core-inner span{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.67);
  font-size:8px;
}

.zwc-node{
  position:absolute;
  min-width:118px;
  min-height:56px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #dce6ef;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(3,26,54,.07);
}

.zwc-node i{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf8f6;
  color:#008d80;
  font-size:8px;
  font-style:normal;
  font-weight:950;
}

.zwc-node strong{
  display:block;
  color:#263c56;
  font-size:9px;
  font-weight:900;
}

.zwc-node span{
  display:block;
  margin-top:3px;
  color:#8c98a7;
  font-size:7px;
}

.zwc-n1{top:45px;left:48px}
.zwc-n2{top:47px;right:44px}
.zwc-n3{top:190px;left:26px}
.zwc-n4{top:190px;right:24px}
.zwc-n5{bottom:48px;left:68px}
.zwc-n6{bottom:50px;right:62px}

.zwc-line{
  position:absolute;
  z-index:0;
  background:linear-gradient(
    90deg,
    rgba(7,94,167,.08),
    rgba(0,191,174,.42),
    rgba(7,94,167,.08)
  );
  transform-origin:center;
}

.zwc-l1{
  width:145px;
  height:1px;
  top:143px;
  left:150px;
  transform:rotate(31deg);
}

.zwc-l2{
  width:145px;
  height:1px;
  top:143px;
  right:145px;
  transform:rotate(-31deg);
}

.zwc-l3{
  width:150px;
  height:1px;
  top:244px;
  left:126px;
}

.zwc-l4{
  width:150px;
  height:1px;
  top:244px;
  right:124px;
}

.zwc-l5{
  width:145px;
  height:1px;
  bottom:121px;
  left:166px;
  transform:rotate(-29deg);
}

.zwc-l6{
  width:145px;
  height:1px;
  bottom:121px;
  right:158px;
  transform:rotate(29deg);
}

.zwc-data{
  position:absolute;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  padding:8px 12px;
  border:1px solid #dce6ef;
  background:#fff;
  color:#607086;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}

.zwc-data b{
  color:#008d80;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:1080px){
  .zwc-grid{
    grid-template-columns:1fr;
    gap:54px;
  }

  .zwc-copy{
    max-width:760px;
  }

  .zwc-visual{
    width:min(760px,100%);
    margin-inline:auto;
  }
}

@media(max-width:700px){
  .zwc{
    padding:82px 0;
  }

  .zwc-shell{
    width:min(100% - 28px,1240px);
  }

  .zwc h2{
    font-size:32px;
  }

  .zwc-visual{
    min-height:auto;
  }

  .zwc-board{
    position:relative;
  }

  .zwc-board-body{
    height:auto;
    padding:22px 14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .zwc-core{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    height:110px;
    transform:none;
    grid-column:1/-1;
    border-radius:0;
    order:-1;
  }

  .zwc-node{
    position:relative;
    inset:auto;
    min-width:0;
    min-height:64px;
    padding:9px;
  }

  .zwc-line{
    display:none;
  }

  .zwc-data{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    grid-column:1/-1;
    text-align:center;
    white-space:normal;
  }
}

@media(max-width:420px){
  .zwc-board-body{
    grid-template-columns:1fr;
  }

  .zwc-core,
  .zwc-data{
    grid-column:auto;
  }
}

/* =========================================================
   ZALWEB ECOSYSTEM V2
   ========================================================= */

.zwe{
  padding:118px 0;
  background:#f6f9fc;
  position:relative;
  overflow:hidden;
}

.zwe-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwe-head{
  max-width:790px;
  margin:0 auto 54px;
  text-align:center;
}

.zwe-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#075ea7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
}

.zwe-kicker::before,
.zwe-kicker::after{
  content:"";
  width:22px;
  height:1px;
  background:#00bfae;
}

.zwe-head h2{
  margin:0;
  color:#031a36;
  font-size:clamp(35px,3.7vw,52px);
  line-height:1.5;
  font-weight:900;
  letter-spacing:-1px;
}

.zwe-head p{
  max-width:690px;
  margin:20px auto 0;
  color:#68778b;
  font-size:15px;
  line-height:2.1;
}

.zwe-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.zwe-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid #dbe5ef;
  background:#fff;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.zwe-card:hover{
  transform:translateY(-5px);
  border-color:#bcd0e0;
  box-shadow:0 24px 64px rgba(3,26,54,.10);
}

.zwe-card-top{
  min-height:280px;
  padding:18px;
  border-bottom:1px solid #e5ebf2;
  background:
    radial-gradient(circle at 12% 10%,rgba(0,191,174,.11),transparent 30%),
    linear-gradient(160deg,#fbfdff,#f1f6fa);
}

.zwe-card:nth-child(2) .zwe-card-top{
  background:
    radial-gradient(circle at 88% 12%,rgba(7,94,167,.11),transparent 30%),
    linear-gradient(160deg,#fbfdff,#f2f7fb);
}

.zwe-card:nth-child(3) .zwe-card-top{
  background:
    radial-gradient(circle at 50% 4%,rgba(0,191,174,.12),transparent 34%),
    linear-gradient(150deg,#061f3f,#032747);
}

.zwe-window{
  overflow:hidden;
  height:244px;
  border:1px solid rgba(3,26,54,.10);
  background:#fff;
  box-shadow:0 16px 42px rgba(3,26,54,.10);
  direction:ltr;
}

.zwe-window-bar{
  height:35px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e6ecf2;
  background:#fff;
}

.zwe-dots{
  display:flex;
  gap:4px;
}

.zwe-dots i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c6d0da;
}

.zwe-window-title{
  color:#8895a5;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}

.zwe-app-ui{
  height:209px;
  display:grid;
  grid-template-columns:76px 1fr;
}

.zwe-mini-side{
  padding:11px 8px;
  border-right:1px solid #edf1f5;
  background:#f8fafc;
}

.zwe-mini-side b{
  display:block;
  margin-bottom:11px;
  color:#18324f;
  font-size:7px;
}

.zwe-mini-side span{
  height:6px;
  display:block;
  margin-bottom:9px;
  background:#e3eaf0;
}

.zwe-mini-side span:first-of-type{
  width:80%;
  background:#00bfae;
}

.zwe-mini-main{
  padding:12px;
  background:#fbfcfd;
}

.zwe-mini-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:8px;
}

.zwe-mini-kpis i{
  height:38px;
  display:block;
  border:1px solid #e6ecf2;
  background:#fff;
}

.zwe-mini-chart{
  height:76px;
  margin-bottom:8px;
  padding:10px 9px 0;
  display:flex;
  align-items:flex-end;
  gap:5px;
  border:1px solid #e6ecf2;
  background:#fff;
}

.zwe-mini-chart i{
  flex:1;
  display:block;
  background:linear-gradient(to top,#075ea7,#00bfae);
}

.zwe-mini-chart i:nth-child(1){height:30%}
.zwe-mini-chart i:nth-child(2){height:52%}
.zwe-mini-chart i:nth-child(3){height:45%}
.zwe-mini-chart i:nth-child(4){height:68%}
.zwe-mini-chart i:nth-child(5){height:57%}
.zwe-mini-chart i:nth-child(6){height:82%}

.zwe-mini-rows{
  display:grid;
  gap:5px;
}

.zwe-mini-rows i{
  height:9px;
  display:block;
  background:#edf1f5;
}

/* SITE BUILDER */

.zwe-builder-ui{
  height:209px;
  display:grid;
  grid-template-columns:72px 1fr 58px;
}

.zwe-pages{
  padding:10px 7px;
  border-right:1px solid #e8eef4;
  background:#f8fafc;
}

.zwe-pages b{
  display:block;
  margin-bottom:10px;
  color:#203853;
  font-size:7px;
}

.zwe-pages span{
  height:7px;
  display:block;
  margin-bottom:8px;
  background:#e2e9ef;
}

.zwe-pages span:nth-child(2){
  background:#00bfae;
}

.zwe-canvas{
  padding:12px 9px;
  background:#eef4f8;
}

.zwe-page-preview{
  height:100%;
  padding:9px;
  border:1px solid #dce5ed;
  background:#fff;
}

.zwe-preview-hero{
  height:62px;
  margin-bottom:7px;
  background:
    linear-gradient(135deg,#05264b,#0873b8);
}

.zwe-preview-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-bottom:6px;
}

.zwe-preview-row i{
  height:34px;
  border:1px solid #e5ebf1;
  background:#f7f9fb;
}

.zwe-preview-line{
  height:8px;
  margin-bottom:5px;
  background:#edf1f4;
}

.zwe-inspector{
  padding:9px 7px;
  border-left:1px solid #e8eef4;
  background:#fff;
}

.zwe-inspector b{
  display:block;
  margin-bottom:9px;
  color:#44566d;
  font-size:6px;
}

.zwe-inspector i{
  height:7px;
  display:block;
  margin-bottom:7px;
  background:#edf1f4;
}

/* AI */

.zwe-card:nth-child(3) .zwe-window{
  border-color:rgba(255,255,255,.12);
  background:#061f3e;
}

.zwe-card:nth-child(3) .zwe-window-bar{
  border-bottom-color:rgba(255,255,255,.10);
  background:#08284b;
}

.zwe-card:nth-child(3) .zwe-window-title{
  color:#8da9c5;
}

.zwe-ai-ui{
  height:209px;
  padding:14px;
  background:
    radial-gradient(circle at 90% 0%,rgba(0,191,174,.12),transparent 34%),
    #061f3e;
}

.zwe-ai-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:11px;
}

.zwe-ai-status strong{
  color:#fff;
  font-size:8px;
  letter-spacing:.08em;
}

.zwe-ai-status span{
  padding:4px 6px;
  background:rgba(0,191,174,.12);
  color:#5be2d5;
  font-size:6px;
  font-weight:900;
}

.zwe-ai-query{
  padding:10px;
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#d9e5ef;
  font-size:7px;
  line-height:1.7;
}

.zwe-ai-sources{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-bottom:8px;
}

.zwe-ai-sources span{
  padding:6px 3px;
  border:1px solid rgba(0,191,174,.14);
  background:rgba(0,191,174,.05);
  color:#82cfc7;
  font-size:6px;
  text-align:center;
}

.zwe-ai-answer{
  padding:10px;
  border-left:2px solid #00bfae;
  background:rgba(255,255,255,.05);
}

.zwe-ai-answer b{
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:7px;
}

.zwe-ai-answer span{
  display:block;
  color:#9db3c7;
  font-size:6px;
  line-height:1.7;
}

/* CONTENT */

.zwe-content{
  padding:28px 26px 30px;
}

.zwe-number{
  display:block;
  margin-bottom:12px;
  color:#00a897;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  direction:ltr;
}

.zwe-content h3{
  margin:0;
  color:#031a36;
  font-size:23px;
  line-height:1.6;
  font-weight:900;
}

.zwe-content p{
  min-height:88px;
  margin:12px 0 20px;
  color:#6b798c;
  font-size:13px;
  line-height:2;
}

.zwe-tags{
  min-height:64px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:6px;
  margin-bottom:23px;
}

.zwe-tags span{
  padding:6px 8px;
  border:1px solid #e1e9f0;
  background:#f9fbfc;
  color:#53667c;
  font-size:9px;
  font-weight:800;
}

.zwe-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#075ea7;
  font-size:12px;
  font-weight:900;
}

.zwe-link::after{
  content:"←";
  transition:transform .2s ease;
}

.zwe-link:hover::after{
  transform:translateX(-4px);
}

.zwe-bottom{
  margin-top:26px;
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  border:1px solid #dce6ef;
  background:#fff;
}

.zwe-bottom strong{
  display:block;
  margin-bottom:5px;
  color:#17324f;
  font-size:14px;
}

.zwe-bottom span{
  color:#748397;
  font-size:11px;
  line-height:1.9;
}

.zwe-bottom-code{
  color:#008f82;
  font-size:10px;
  font-weight:950;
  letter-spacing:.1em;
  direction:ltr;
}

@media(max-width:1040px){
  .zwe-grid{
    grid-template-columns:1fr;
  }

  .zwe-card{
    display:grid;
    grid-template-columns:minmax(340px,.9fr) 1.1fr;
  }

  .zwe-card-top{
    min-height:100%;
  }

  .zwe-content p{
    min-height:auto;
  }

  .zwe-tags{
    min-height:auto;
  }
}

@media(max-width:700px){
  .zwe{
    padding:82px 0;
  }

  .zwe-shell{
    width:min(100% - 28px,1240px);
  }

  .zwe-head{
    margin-bottom:36px;
  }

  .zwe-head h2{
    font-size:32px;
  }

  .zwe-card{
    display:block;
  }

  .zwe-card-top{
    min-height:auto;
    padding:12px;
  }

  .zwe-window{
    height:230px;
  }

  .zwe-app-ui,
  .zwe-builder-ui,
  .zwe-ai-ui{
    height:195px;
  }

  .zwe-bottom{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ZALWEB BUSINESS SHOWCASE V2
   ========================================================= */

.zwb{
  padding:120px 0;
  overflow:hidden;
  background:#fff;
}

.zwb-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwb-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:64px;
  align-items:end;
  margin-bottom:48px;
}

.zwb-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:17px;
  color:#075ea7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
}

.zwb-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:#00bfae;
}

.zwb-head h2{
  margin:0;
  color:#031a36;
  font-size:clamp(36px,3.8vw,54px);
  line-height:1.5;
  font-weight:900;
  letter-spacing:-1px;
}

.zwb-head p{
  max-width:620px;
  margin:0;
  color:#69798c;
  font-size:15px;
  line-height:2.15;
}

/* APP SHELL */

.zwb-app{
  overflow:hidden;
  border:1px solid #d9e4ee;
  background:#fff;
  box-shadow:0 34px 90px rgba(3,26,54,.11);
  direction:ltr;
}

.zwb-top{
  height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #e5ecf2;
  background:#fff;
}

.zwb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#112b47;
  font-size:11px;
  font-weight:950;
  letter-spacing:.1em;
}

.zwb-brand-mark{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#00bfae,#075ea7);
  color:#fff;
  font-size:9px;
}

.zwb-top-right{
  display:flex;
  align-items:center;
  gap:9px;
}

.zwb-demo{
  padding:6px 8px;
  border:1px solid rgba(0,191,174,.20);
  background:#eaf9f7;
  color:#008e82;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.zwb-user{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f0f4f7;
  color:#57687d;
  font-size:8px;
  font-weight:900;
}

.zwb-app-body{
  min-height:590px;
  display:grid;
  grid-template-columns:168px 1fr;
}

.zwb-side{
  padding:20px 13px;
  border-right:1px solid #e5ebf1;
  background:#f8fafc;
}

.zwb-side-label{
  display:block;
  margin:0 9px 12px;
  color:#a0aab8;
  font-size:7px;
  font-weight:900;
  letter-spacing:.14em;
}

.zwb-side-item{
  min-height:38px;
  margin-bottom:5px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#68788c;
  font-size:9px;
  font-weight:800;
}

.zwb-side-item::before{
  content:"";
  width:7px;
  height:7px;
  border:1px solid #aab7c4;
}

.zwb-side-item.active{
  background:#e8f7f5;
  color:#075d70;
}

.zwb-side-item.active::before{
  border-color:#00bfae;
  background:#00bfae;
}

.zwb-main{
  padding:24px;
  background:#fbfcfd;
}

.zwb-main-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:20px;
}

.zwb-main-head small{
  display:block;
  margin-bottom:5px;
  color:#929dac;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
}

.zwb-main-head strong{
  color:#142e4a;
  font-size:18px;
  font-weight:950;
}

.zwb-period{
  padding:7px 10px;
  border:1px solid #dde6ee;
  background:#fff;
  color:#69798c;
  font-size:8px;
  font-weight:900;
}

.zwb-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:12px;
}

.zwb-kpi{
  padding:14px;
  border:1px solid #e3eaf1;
  background:#fff;
}

.zwb-kpi span{
  display:block;
  margin-bottom:8px;
  color:#8d99a8;
  font-size:8px;
  font-weight:800;
}

.zwb-kpi b{
  display:block;
  color:#132e4a;
  font-size:20px;
  font-weight:950;
}

.zwb-kpi em{
  display:block;
  margin-top:8px;
  color:#009b8d;
  font-size:7px;
  font-style:normal;
  font-weight:900;
}

.zwb-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:10px;
}

.zwb-panel{
  border:1px solid #e3eaf1;
  background:#fff;
}

.zwb-panel-head{
  min-height:46px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #edf1f4;
}

.zwb-panel-head strong{
  color:#34485f;
  font-size:9px;
  font-weight:900;
}

.zwb-panel-head span{
  color:#9aa5b2;
  font-size:7px;
}

/* WORKFLOW */

.zwb-workflow{
  padding:16px;
}

.zwb-flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  align-items:center;
}

.zwb-step{
  position:relative;
  min-height:76px;
  padding:10px;
  border:1px solid #e1e9f0;
  background:#fafcfd;
}

.zwb-step::after{
  content:"";
  position:absolute;
  top:50%;
  right:-8px;
  width:8px;
  height:1px;
  background:#bcd0dc;
}

.zwb-step:last-child::after{
  display:none;
}

.zwb-step small{
  display:block;
  margin-bottom:7px;
  color:#9aa5b1;
  font-size:6px;
  font-weight:900;
}

.zwb-step strong{
  display:block;
  color:#263d57;
  font-size:8px;
}

.zwb-step span{
  display:inline-flex;
  margin-top:9px;
  padding:4px 5px;
  background:#e9f8f6;
  color:#008e82;
  font-size:6px;
  font-weight:900;
}

/* TABLE */

.zwb-table{
  padding:0 14px 12px;
}

.zwb-tr{
  min-height:43px;
  display:grid;
  grid-template-columns:1.25fr .8fr .7fr;
  gap:8px;
  align-items:center;
  border-bottom:1px solid #edf1f4;
}

.zwb-tr:last-child{
  border-bottom:0;
}

.zwb-th{
  min-height:36px;
  color:#9aa4b0;
  font-size:7px;
  font-weight:900;
}

.zwb-tr strong{
  color:#405369;
  font-size:8px;
  font-weight:900;
}

.zwb-tr span{
  color:#778598;
  font-size:7px;
}

.zwb-badge{
  justify-self:start;
  padding:5px 6px;
  font-size:6px !important;
  font-weight:900;
}

.zwb-badge.ok{
  background:#e7f8f5;
  color:#008d81;
}

.zwb-badge.pending{
  background:#fff4db;
  color:#9a6a00;
}

.zwb-badge.review{
  background:#e9f1fb;
  color:#27649d;
}

/* ACTIVITY */

.zwb-activity{
  padding:8px 14px 14px;
}

.zwb-event{
  position:relative;
  padding:10px 0 10px 20px;
  border-bottom:1px solid #edf1f4;
}

.zwb-event:last-child{
  border-bottom:0;
}

.zwb-event::before{
  content:"";
  position:absolute;
  left:1px;
  top:16px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00bfae;
}

.zwb-event strong{
  display:block;
  color:#42556b;
  font-size:8px;
  font-weight:900;
}

.zwb-event span{
  display:block;
  margin-top:4px;
  color:#8a96a5;
  font-size:7px;
}

/* LOWER STRIP */

.zwb-bottom{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.zwb-mini{
  min-height:106px;
  padding:15px;
  border:1px solid #e3eaf1;
  background:#fff;
}

.zwb-mini strong{
  display:block;
  margin-bottom:12px;
  color:#354960;
  font-size:9px;
}

.zwb-progress{
  display:grid;
  gap:8px;
}

.zwb-progress-row{
  display:grid;
  grid-template-columns:72px 1fr 32px;
  gap:8px;
  align-items:center;
}

.zwb-progress-row span{
  color:#718195;
  font-size:7px;
}

.zwb-track{
  height:5px;
  background:#edf2f5;
}

.zwb-track i{
  height:100%;
  display:block;
  background:linear-gradient(90deg,#075ea7,#00bfae);
}

.zwb-progress-row b{
  color:#41566d;
  font-size:7px;
  text-align:right;
}

.zwb-ai{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
}

.zwb-ai-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:#031a36;
  color:#fff;
  font-size:8px;
  font-weight:950;
}

.zwb-ai-copy b{
  display:block;
  margin-bottom:5px;
  color:#263e58;
  font-size:8px;
}

.zwb-ai-copy span{
  display:block;
  color:#7b899b;
  font-size:7px;
  line-height:1.7;
}

.zwb-ai-state{
  padding:6px 8px;
  border:1px solid rgba(0,191,174,.20);
  background:#e9f8f6;
  color:#008b7f;
  font-size:6px;
  font-weight:900;
}

/* TEXT BELOW APP */

.zwb-caption{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.zwb-caption article{
  padding:20px;
  border:1px solid #e0e8ef;
  background:#fff;
}

.zwb-caption small{
  display:block;
  margin-bottom:9px;
  color:#00a694;
  font-size:8px;
  font-weight:950;
  letter-spacing:.1em;
}

.zwb-caption strong{
  display:block;
  margin-bottom:8px;
  color:#19334f;
  font-size:13px;
  font-weight:900;
}

.zwb-caption p{
  margin:0;
  color:#748397;
  font-size:11px;
  line-height:1.9;
}

@media(max-width:1000px){
  .zwb-head{
    grid-template-columns:1fr;
    gap:20px;
  }

  .zwb-app-body{
    grid-template-columns:1fr;
  }

  .zwb-side{
    display:none;
  }
}

@media(max-width:760px){
  .zwb{
    padding:82px 0;
  }

  .zwb-shell{
    width:min(100% - 28px,1240px);
  }

  .zwb-head h2{
    font-size:32px;
  }

  .zwb-main{
    padding:13px;
  }

  .zwb-kpis{
    grid-template-columns:1fr 1fr;
  }

  .zwb-grid{
    grid-template-columns:1fr;
  }

  .zwb-bottom{
    grid-column:auto;
    grid-template-columns:1fr;
  }

  .zwb-flow{
    grid-template-columns:1fr;
  }

  .zwb-step::after{
    display:none;
  }

  .zwb-caption{
    grid-template-columns:1fr;
  }
}

@media(max-width:430px){
  .zwb-tr{
    grid-template-columns:1.2fr .8fr;
  }

  .zwb-tr > :nth-child(2){
    display:none;
  }

  .zwb-progress-row{
    grid-template-columns:58px 1fr 28px;
  }
}


/* =========================================================
   ZALWEB PLATFORM CAPABILITIES V2
   ========================================================= */

.zwp{
  position:relative;
  padding:120px 0;
  overflow:hidden;
  background:#f5f8fb;
}

.zwp-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwp-head{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:end;
  margin-bottom:50px;
}

.zwp-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:17px;
  color:#075ea7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
}

.zwp-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:#00bfae;
}

.zwp-head h2{
  margin:0;
  color:#031a36;
  font-size:clamp(36px,3.7vw,52px);
  line-height:1.52;
  font-weight:900;
  letter-spacing:-1px;
}

.zwp-head p{
  max-width:620px;
  margin:0;
  color:#69798d;
  font-size:15px;
  line-height:2.15;
}

.zwp-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid #dbe5ee;
  border-right:1px solid #dbe5ee;
}

.zwp-card{
  position:relative;
  min-height:300px;
  padding:30px 28px 28px;
  overflow:hidden;
  border-left:1px solid #dbe5ee;
  border-bottom:1px solid #dbe5ee;
  background:#fff;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.zwp-card:hover{
  z-index:2;
  transform:translateY(-4px);
  background:#fcfefe;
  box-shadow:0 22px 55px rgba(3,26,54,.09);
}

.zwp-card::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  left:-90px;
  bottom:-100px;
  border:1px solid rgba(0,191,174,.13);
  border-radius:50%;
}

.zwp-no{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:42px;
}

.zwp-no b{
  color:#00a995;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  direction:ltr;
}

.zwp-symbol{
  width:42px;
  height:42px;
  position:relative;
  border:1px solid #dbe5ee;
  background:#f8fbfc;
}

.zwp-symbol::before,
.zwp-symbol::after{
  content:"";
  position:absolute;
  background:#00bfae;
}

.zwp-symbol::before{
  width:18px;
  height:2px;
  left:11px;
  top:19px;
}

.zwp-symbol::after{
  width:2px;
  height:18px;
  left:19px;
  top:11px;
}

.zwp-card:nth-child(2) .zwp-symbol::after{
  transform:rotate(45deg);
}

.zwp-card:nth-child(3) .zwp-symbol{
  border-radius:50%;
}

.zwp-card:nth-child(4) .zwp-symbol::before{
  width:22px;
  left:9px;
  box-shadow:0 -7px 0 #00bfae,0 7px 0 #00bfae;
}

.zwp-card:nth-child(4) .zwp-symbol::after{
  display:none;
}

.zwp-card:nth-child(5) .zwp-symbol::before{
  width:8px;
  height:8px;
  left:8px;
  top:8px;
  box-shadow:
    16px 0 0 #00bfae,
    0 16px 0 #00bfae,
    16px 16px 0 #00bfae;
}

.zwp-card:nth-child(5) .zwp-symbol::after{
  display:none;
}

.zwp-card:nth-child(6) .zwp-symbol{
  background:#031a36;
  border-color:#031a36;
}

.zwp-card h3{
  margin:0 0 12px;
  color:#142f4b;
  font-size:19px;
  line-height:1.7;
  font-weight:900;
}

.zwp-card p{
  margin:0;
  color:#748397;
  font-size:12px;
  line-height:2;
}

.zwp-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:22px;
}

.zwp-meta span{
  padding:5px 7px;
  border:1px solid #e2eaf0;
  background:#f8fafc;
  color:#68788b;
  font-size:8px;
  font-weight:800;
  direction:ltr;
}

.zwp-foot{
  margin-top:28px;
  padding:22px 25px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  border:1px solid #dbe5ee;
  background:#031a36;
}

.zwp-foot strong{
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.zwp-foot span{
  color:#a7b8ca;
  font-size:11px;
  line-height:1.9;
}

.zwp-foot a{
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#00bfae;
  color:#03243e;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:1000px){
  .zwp-head{
    grid-template-columns:1fr;
    gap:20px;
  }

  .zwp-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){
  .zwp{
    padding:82px 0;
  }

  .zwp-shell{
    width:min(100% - 28px,1240px);
  }

  .zwp-head h2{
    font-size:32px;
  }

  .zwp-grid{
    grid-template-columns:1fr;
  }

  .zwp-card{
    min-height:0;
  }

  .zwp-no{
    margin-bottom:28px;
  }

  .zwp-foot{
    grid-template-columns:1fr;
  }

  .zwp-foot a{
    width:100%;
  }
}


/* =========================================================
   ZALWEB ENTERPRISE AI V2
   ========================================================= */

.zwai{
  position:relative;
  padding:124px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 5%,rgba(0,191,174,.13),transparent 30%),
    radial-gradient(circle at 92% 90%,rgba(7,94,167,.18),transparent 34%),
    linear-gradient(145deg,#03182f,#062b50);
  color:#fff;
}

.zwai::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.4;
  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:64px 64px;
}

.zwai-shell{
  position:relative;
  z-index:2;
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwai-head{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:end;
  margin-bottom:52px;
}

.zwai-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#61e2d5;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
}

.zwai-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:#00bfae;
}

.zwai-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(36px,3.8vw,54px);
  line-height:1.5;
  font-weight:900;
  letter-spacing:-1px;
}

.zwai-head p{
  max-width:640px;
  margin:0;
  color:#aabdd0;
  font-size:15px;
  line-height:2.15;
}

.zwai-app{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#071f3a;
  box-shadow:0 38px 100px rgba(0,0,0,.28);
  direction:ltr;
}

.zwai-top{
  height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:#082543;
}

.zwai-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.1em;
}

.zwai-mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#00bfae,#0870bb);
  color:#fff;
  font-size:8px;
  font-weight:950;
}

.zwai-secure{
  display:flex;
  align-items:center;
  gap:7px;
  color:#78d9cf;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.zwai-secure::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00bfae;
  box-shadow:0 0 0 5px rgba(0,191,174,.08);
}

.zwai-body{
  display:grid;
  grid-template-columns:185px 1fr;
  min-height:590px;
}

.zwai-side{
  padding:20px 13px;
  border-right:1px solid rgba(255,255,255,.08);
  background:#061b33;
}

.zwai-side-label{
  display:block;
  margin:0 8px 12px;
  color:#6f8aa3;
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
}

.zwai-side-item{
  min-height:38px;
  margin-bottom:5px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#87a0b8;
  font-size:8px;
  font-weight:800;
}

.zwai-side-item::before{
  content:"";
  width:7px;
  height:7px;
  border:1px solid #547087;
}

.zwai-side-item.active{
  color:#b9fff7;
  background:rgba(0,191,174,.08);
}

.zwai-side-item.active::before{
  border-color:#00bfae;
  background:#00bfae;
}

.zwai-main{
  padding:24px;
  background:
    radial-gradient(circle at 90% 0%,rgba(0,191,174,.08),transparent 28%),
    #071f3a;
}

.zwai-main-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.zwai-main-head small{
  display:block;
  margin-bottom:5px;
  color:#7591aa;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}

.zwai-main-head strong{
  color:#fff;
  font-size:18px;
  font-weight:950;
}

.zwai-mode{
  padding:7px 10px;
  border:1px solid rgba(0,191,174,.16);
  background:rgba(0,191,174,.07);
  color:#67dcd0;
  font-size:7px;
  font-weight:900;
}

.zwai-query{
  margin-bottom:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
}

.zwai-query-label{
  display:block;
  margin-bottom:8px;
  color:#6f8ba5;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.zwai-query p{
  margin:0;
  color:#e8f1f8;
  font-size:13px;
  line-height:2;
}

.zwai-grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:10px;
}

.zwai-panel{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
}

.zwai-panel-head{
  min-height:44px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.zwai-panel-head strong{
  color:#d6e3ee;
  font-size:8px;
  font-weight:900;
}

.zwai-panel-head span{
  color:#68849d;
  font-size:7px;
}

.zwai-sources{
  padding:12px;
  display:grid;
  gap:7px;
}

.zwai-source{
  min-height:48px;
  padding:9px 10px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:9px;
  align-items:center;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.zwai-source-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:rgba(0,191,174,.10);
  color:#6ce1d6;
  font-size:7px;
  font-weight:950;
}

.zwai-source strong{
  display:block;
  color:#c9d7e3;
  font-size:7px;
}

.zwai-source span{
  display:block;
  margin-top:3px;
  color:#708aa1;
  font-size:6px;
}

.zwai-source-state{
  padding:4px 5px;
  background:rgba(0,191,174,.08);
  color:#61d7cc !important;
  font-size:6px !important;
  font-weight:900;
}

.zwai-analysis{
  padding:14px;
}

.zwai-analysis-row{
  position:relative;
  min-height:56px;
  padding:10px 12px 10px 40px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.zwai-analysis-row:last-child{
  border-bottom:0;
}

.zwai-analysis-row::before{
  content:"";
  position:absolute;
  left:12px;
  top:15px;
  width:15px;
  height:15px;
  border:1px solid rgba(0,191,174,.35);
  background:rgba(0,191,174,.08);
}

.zwai-analysis-row::after{
  content:"";
  position:absolute;
  left:17px;
  top:20px;
  width:5px;
  height:5px;
  background:#00bfae;
}

.zwai-analysis-row strong{
  display:block;
  margin-bottom:4px;
  color:#cbd9e5;
  font-size:8px;
}

.zwai-analysis-row span{
  display:block;
  color:#718ba3;
  font-size:7px;
  line-height:1.7;
}

.zwai-result{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px;
}

.zwai-insight,
.zwai-actions{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
}

.zwai-insight{
  padding:16px;
  border-left:2px solid #00bfae;
}

.zwai-insight small{
  display:block;
  margin-bottom:8px;
  color:#63d8cd;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.zwai-insight strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:12px;
  line-height:1.8;
}

.zwai-insight p{
  margin:0;
  color:#91a8bc;
  font-size:8px;
  line-height:1.8;
}

.zwai-actions{
  padding:14px;
}

.zwai-actions small{
  display:block;
  margin-bottom:9px;
  color:#748fa8;
  font-size:7px;
  font-weight:900;
}

.zwai-action{
  min-height:34px;
  margin-bottom:6px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  color:#aebfd0;
  font-size:7px;
}

.zwai-action:last-child{
  margin-bottom:0;
}

.zwai-action b{
  color:#65dacd;
  font-size:6px;
}

.zwai-note{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(255,255,255,.10);
}

.zwai-note article{
  padding:22px;
  border-left:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.zwai-note small{
  display:block;
  margin-bottom:8px;
  color:#58d8cc;
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
}

.zwai-note strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.zwai-note p{
  margin:0;
  color:#899fb3;
  font-size:10px;
  line-height:1.9;
}

.zwai-link{
  margin-top:26px;
  display:flex;
  justify-content:flex-end;
}

.zwai-link a{
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#00bfae;
  color:#03243e;
  font-size:11px;
  font-weight:900;
}

@media(max-width:1000px){
  .zwai-head{
    grid-template-columns:1fr;
    gap:20px;
  }

  .zwai-body{
    grid-template-columns:1fr;
  }

  .zwai-side{
    display:none;
  }
}

@media(max-width:760px){
  .zwai{
    padding:84px 0;
  }

  .zwai-shell{
    width:min(100% - 28px,1240px);
  }

  .zwai-head h2{
    font-size:32px;
  }

  .zwai-main{
    padding:13px;
  }

  .zwai-grid{
    grid-template-columns:1fr;
  }

  .zwai-result{
    grid-column:auto;
    grid-template-columns:1fr;
  }

  .zwai-note{
    grid-template-columns:1fr;
  }

  .zwai-link a{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   ZALWEB INDUSTRIES V2
   ========================================================= */

.zwi{
  position:relative;
  padding:120px 0;
  overflow:hidden;
  background:#fff;
}

.zwi-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwi-head{
  max-width:790px;
  margin:0 auto 52px;
  text-align:center;
}

.zwi-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#075ea7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
}

.zwi-kicker::before,
.zwi-kicker::after{
  content:"";
  width:22px;
  height:1px;
  background:#00bfae;
}

.zwi-head h2{
  margin:0;
  color:#031a36;
  font-size:clamp(36px,3.7vw,52px);
  line-height:1.5;
  font-weight:900;
  letter-spacing:-1px;
}

.zwi-head p{
  max-width:680px;
  margin:20px auto 0;
  color:#6b7a8d;
  font-size:15px;
  line-height:2.1;
}

.zwi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.zwi-card{
  position:relative;
  min-height:355px;
  overflow:hidden;
  border:1px solid #dce5ed;
  background:#fff;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.zwi-card:hover{
  transform:translateY(-5px);
  border-color:#b9cedd;
  box-shadow:0 24px 60px rgba(3,26,54,.09);
}

.zwi-visual{
  position:relative;
  height:156px;
  overflow:hidden;
  border-bottom:1px solid #e4ebf1;
  background:
    radial-gradient(circle at 14% 18%,rgba(0,191,174,.13),transparent 32%),
    linear-gradient(150deg,#f8fbfd,#edf4f8);
}

.zwi-visual::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.7;
  background-image:
    linear-gradient(rgba(3,26,54,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,54,.035) 1px,transparent 1px);
  background-size:34px 34px;
}

.zwi-mini{
  position:absolute;
  left:22px;
  right:22px;
  top:26px;
  height:104px;
  padding:12px;
  border:1px solid #d9e4ed;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 34px rgba(3,26,54,.07);
  direction:ltr;
}

.zwi-mini-top{
  height:17px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.zwi-mini-top strong{
  color:#31475f;
  font-size:7px;
  letter-spacing:.08em;
}

.zwi-mini-top span{
  padding:3px 5px;
  background:#e9f8f6;
  color:#008d81;
  font-size:5px;
  font-weight:900;
}

.zwi-mini-body{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.zwi-mini-body i{
  display:block;
  height:48px;
  position:relative;
  border:1px solid #e5ebf0;
  background:#f8fafc;
}

.zwi-mini-body i::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  height:5px;
  background:#dce7ee;
  box-shadow:
    0 -10px 0 #e8eef3,
    0 -20px 0 #00bfae;
}

.zwi-content{
  padding:25px 24px 27px;
}

.zwi-no{
  display:block;
  margin-bottom:9px;
  color:#00a694;
  font-size:9px;
  font-weight:950;
  letter-spacing:.1em;
  direction:ltr;
}

.zwi-content h3{
  margin:0;
  color:#16314d;
  font-size:19px;
  line-height:1.7;
  font-weight:900;
}

.zwi-content p{
  margin:10px 0 18px;
  color:#718095;
  font-size:11px;
  line-height:2;
}

.zwi-use{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.zwi-use span{
  padding:5px 7px;
  border:1px solid #e2eaf0;
  background:#f9fbfc;
  color:#5f7185;
  font-size:8px;
  font-weight:800;
}

.zwi-card:nth-child(2) .zwi-mini-body i:nth-child(2)::before{
  box-shadow:
    0 -10px 0 #075ea7,
    0 -20px 0 #00bfae;
}

.zwi-card:nth-child(3) .zwi-visual{
  background:
    radial-gradient(circle at 88% 15%,rgba(7,94,167,.13),transparent 32%),
    linear-gradient(150deg,#f8fbfd,#edf4f8);
}

.zwi-card:nth-child(4) .zwi-visual{
  background:
    radial-gradient(circle at 20% 80%,rgba(0,191,174,.13),transparent 35%),
    linear-gradient(150deg,#f8fbfd,#edf4f8);
}

.zwi-card:nth-child(5) .zwi-mini-body i:nth-child(1)::before{
  box-shadow:
    0 -10px 0 #075ea7,
    0 -20px 0 #00bfae;
}

.zwi-card:nth-child(6) .zwi-visual{
  background:
    radial-gradient(circle at 80% 30%,rgba(0,191,174,.14),transparent 35%),
    linear-gradient(150deg,#f8fbfd,#edf4f8);
}

.zwi-bottom{
  margin-top:24px;
  padding:25px 27px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:center;
  background:#f5f8fb;
  border:1px solid #dce5ed;
}

.zwi-bottom strong{
  display:block;
  margin-bottom:6px;
  color:#19334f;
  font-size:14px;
  font-weight:900;
}

.zwi-bottom span{
  color:#718095;
  font-size:11px;
  line-height:1.9;
}

.zwi-bottom a{
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#031a36;
  color:#fff;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:1000px){
  .zwi-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){
  .zwi{
    padding:82px 0;
  }

  .zwi-shell{
    width:min(100% - 28px,1240px);
  }

  .zwi-head h2{
    font-size:32px;
  }

  .zwi-grid{
    grid-template-columns:1fr;
  }

  .zwi-card{
    min-height:0;
  }

  .zwi-bottom{
    grid-template-columns:1fr;
  }

  .zwi-bottom a{
    width:100%;
  }
}


/* =========================================================
   ZALWEB IMPLEMENTATION V2
   ========================================================= */

.zwim{
  position:relative;
  padding:122px 0;
  overflow:hidden;
  background:#f5f8fb;
}

.zwim-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwim-head{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:70px;
  align-items:end;
  margin-bottom:54px;
}

.zwim-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#075ea7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
}

.zwim-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:#00bfae;
}

.zwim-head h2{
  margin:0;
  color:#031a36;
  font-size:clamp(36px,3.8vw,54px);
  line-height:1.52;
  font-weight:900;
  letter-spacing:-1px;
}

.zwim-head p{
  max-width:630px;
  margin:0;
  color:#68788c;
  font-size:15px;
  line-height:2.15;
}

/* ARCHITECTURE */

.zwim-architecture{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:18px;
  margin-bottom:28px;
}

.zwim-principles{
  display:grid;
  gap:10px;
}

.zwim-principle{
  position:relative;
  min-height:118px;
  padding:22px 64px 20px 20px;
  border:1px solid #dbe5ed;
  background:#fff;
}

.zwim-principle-no{
  position:absolute;
  top:20px;
  right:20px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:#e9f8f6;
  color:#008f82;
  font-size:8px;
  font-weight:950;
}

.zwim-principle strong{
  display:block;
  margin-bottom:7px;
  color:#19334f;
  font-size:13px;
  font-weight:900;
}

.zwim-principle span{
  display:block;
  color:#758497;
  font-size:10px;
  line-height:1.9;
}

/* STACK VISUAL */

.zwim-stack{
  position:relative;
  min-height:374px;
  padding:22px;
  overflow:hidden;
  border:1px solid #d9e4ed;
  background:
    radial-gradient(circle at 90% 10%,rgba(0,191,174,.10),transparent 28%),
    #fff;
}

.zwim-stack::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  background-image:
    linear-gradient(rgba(3,26,54,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,26,54,.03) 1px,transparent 1px);
  background-size:46px 46px;
  pointer-events:none;
}

.zwim-stack-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.zwim-stack-head strong{
  color:#243c57;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  direction:ltr;
}

.zwim-stack-head span{
  padding:6px 8px;
  border:1px solid rgba(0,191,174,.20);
  background:#ebfaf8;
  color:#008f82;
  font-size:7px;
  font-weight:900;
}

.zwim-layers{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
}

.zwim-layer{
  min-height:56px;
  padding:0 16px;
  display:grid;
  grid-template-columns:130px 1fr auto;
  gap:14px;
  align-items:center;
  border:1px solid #e0e8ef;
  background:rgba(255,255,255,.94);
}

.zwim-layer b{
  color:#18334f;
  font-size:9px;
  font-weight:950;
  direction:ltr;
}

.zwim-layer p{
  margin:0;
  color:#718095;
  font-size:8px;
  line-height:1.6;
}

.zwim-layer em{
  padding:5px 7px;
  background:#f1f5f8;
  color:#647589;
  font-size:6px;
  font-style:normal;
  font-weight:900;
  direction:ltr;
}

.zwim-layer.core{
  border-color:rgba(0,191,174,.25);
  background:#f2fbfa;
}

.zwim-layer.core em{
  background:#00bfae;
  color:#03243e;
}

/* PROCESS */

.zwim-process{
  position:relative;
  padding:28px;
  border:1px solid #d9e4ed;
  background:#031a36;
}

.zwim-process-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}

.zwim-process-head strong{
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:17px;
  font-weight:900;
}

.zwim-process-head span{
  color:#98adc1;
  font-size:10px;
  line-height:1.8;
}

.zwim-process-code{
  color:#57d9cc !important;
  font-size:9px !important;
  font-weight:950;
  letter-spacing:.10em;
  direction:ltr;
}

.zwim-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.zwim-step{
  position:relative;
  min-height:192px;
  padding:20px 18px;
  border-top:1px solid rgba(255,255,255,.12);
  border-left:1px solid rgba(255,255,255,.10);
}

.zwim-step:last-child{
  border-right:1px solid rgba(255,255,255,.10);
}

.zwim-step::before{
  content:"";
  position:absolute;
  top:-5px;
  left:18px;
  width:9px;
  height:9px;
  background:#00bfae;
  box-shadow:0 0 0 5px rgba(0,191,174,.08);
}

.zwim-step small{
  display:block;
  margin-bottom:27px;
  color:#5fd9ce;
  font-size:8px;
  font-weight:950;
  letter-spacing:.10em;
  direction:ltr;
}

.zwim-step strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.zwim-step p{
  margin:0;
  color:#8fa5b9;
  font-size:9px;
  line-height:1.9;
}

.zwim-foot{
  margin-top:18px;
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  border:1px solid #d9e4ed;
  background:#fff;
}

.zwim-foot strong{
  display:block;
  margin-bottom:6px;
  color:#17324e;
  font-size:14px;
  font-weight:900;
}

.zwim-foot span{
  color:#758497;
  font-size:11px;
  line-height:1.9;
}

.zwim-foot a{
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#00bfae;
  color:#03243e;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:1000px){
  .zwim-head{
    grid-template-columns:1fr;
    gap:20px;
  }

  .zwim-architecture{
    grid-template-columns:1fr;
  }

  .zwim-steps{
    grid-template-columns:1fr 1fr;
  }

  .zwim-step{
    border-right:1px solid rgba(255,255,255,.10);
  }
}

@media(max-width:700px){
  .zwim{
    padding:82px 0;
  }

  .zwim-shell{
    width:min(100% - 28px,1240px);
  }

  .zwim-head h2{
    font-size:32px;
  }

  .zwim-layer{
    min-height:0;
    padding:14px;
    grid-template-columns:1fr;
    gap:5px;
  }

  .zwim-layer em{
    justify-self:start;
  }

  .zwim-process{
    padding:21px 15px;
  }

  .zwim-process-head{
    display:block;
  }

  .zwim-process-code{
    display:block;
    margin-top:12px;
  }

  .zwim-steps{
    grid-template-columns:1fr;
  }

  .zwim-step{
    min-height:0;
  }

  .zwim-foot{
    grid-template-columns:1fr;
  }

  .zwim-foot a{
    width:100%;
  }
}


/* =========================================================
   ZALWEB FAQ FINAL V2
   ========================================================= */

.zwfaq{
  position:relative;
  padding:120px 0;
  background:#fff;
}

.zwfaq-shell{
  width:min(1040px,calc(100% - 48px));
  margin-inline:auto;
}

.zwfaq-head{
  max-width:720px;
  margin:0 auto 50px;
  text-align:center;
}

.zwfaq-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#075ea7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  direction:ltr;
}

.zwfaq-kicker::before,
.zwfaq-kicker::after{
  content:"";
  width:22px;
  height:1px;
  background:#00bfae;
}

.zwfaq-head h2{
  margin:0;
  color:#031a36;
  font-size:clamp(35px,3.6vw,50px);
  line-height:1.55;
  font-weight:900;
  letter-spacing:-1px;
}

.zwfaq-head p{
  max-width:620px;
  margin:18px auto 0;
  color:#6d7c90;
  font-size:14px;
  line-height:2.1;
}

.zwfaq-list{
  border-top:1px solid #dce5ed;
}

.zwfaq-item{
  border-bottom:1px solid #dce5ed;
  background:#fff;
}

.zwfaq-item summary{
  min-height:82px;
  padding:20px 58px 20px 0;
  position:relative;
  display:flex;
  align-items:center;
  color:#17324f;
  font-size:15px;
  line-height:1.9;
  font-weight:900;
  cursor:pointer;
  list-style:none;
}

.zwfaq-item summary::-webkit-details-marker{
  display:none;
}

.zwfaq-item summary::before,
.zwfaq-item summary::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:18px;
  height:2px;
  background:#00a995;
  transform:translateY(-50%);
  transition:transform .2s ease;
}

.zwfaq-item summary::after{
  transform:translateY(-50%) rotate(90deg);
}

.zwfaq-item[open] summary::after{
  transform:translateY(-50%) rotate(0deg);
}

.zwfaq-answer{
  padding:0 58px 25px 0;
  color:#6f7f93;
  font-size:13px;
  line-height:2.1;
}

.zwfaq-answer p{
  margin:0;
}

/* =========================================================
   ZALWEB FINAL CTA V2
   ========================================================= */

.zwfinal{
  position:relative;
  overflow:hidden;
  padding:0 0 92px;
  background:#fff;
}

.zwfinal-shell{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.zwfinal-box{
  position:relative;
  overflow:hidden;
  min-height:410px;
  padding:62px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:center;
  background:
    radial-gradient(circle at 88% 15%,rgba(0,191,174,.18),transparent 31%),
    radial-gradient(circle at 10% 100%,rgba(7,94,167,.22),transparent 37%),
    #031a36;
  color:#fff;
}

.zwfinal-box::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.34;
  pointer-events:none;
  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:58px 58px;
}

.zwfinal-copy,
.zwfinal-side{
  position:relative;
  z-index:2;
}

.zwfinal-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#62dfd4;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  direction:ltr;
}

.zwfinal-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:#00bfae;
}

.zwfinal h2{
  max-width:690px;
  margin:0;
  color:#fff;
  font-size:clamp(36px,4.3vw,58px);
  line-height:1.5;
  font-weight:900;
  letter-spacing:-1px;
}

.zwfinal-copy p{
  max-width:650px;
  margin:20px 0 0;
  color:#a9bdcf;
  font-size:14px;
  line-height:2.1;
}

.zwfinal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}

.zwfinal-primary,
.zwfinal-secondary{
  min-height:50px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:12px;
  font-weight:900;
}

.zwfinal-primary{
  background:#00bfae;
  color:#03243e;
}

.zwfinal-secondary{
  border:1px solid rgba(255,255,255,.17);
  background:rgba(255,255,255,.05);
  color:#fff;
}

.zwfinal-side{
  padding:25px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(10px);
}

.zwfinal-side-label{
  display:block;
  margin-bottom:20px;
  color:#65dbd0;
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
  direction:ltr;
}

.zwfinal-path{
  display:grid;
}

.zwfinal-path-row{
  min-height:62px;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:12px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.zwfinal-path-row:last-child{
  border-bottom:0;
}

.zwfinal-path-row b{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,191,174,.28);
  background:rgba(0,191,174,.08);
  color:#65ded3;
  font-size:7px;
}

.zwfinal-path-row strong{
  display:block;
  margin-bottom:3px;
  color:#fff;
  font-size:10px;
}

.zwfinal-path-row span{
  display:block;
  color:#88a1b7;
  font-size:8px;
  line-height:1.6;
}

@media(max-width:900px){
  .zwfinal-box{
    grid-template-columns:1fr;
    gap:42px;
  }
}

@media(max-width:700px){
  .zwfaq{
    padding:82px 0;
  }

  .zwfaq-shell,
  .zwfinal-shell{
    width:min(100% - 28px,1240px);
  }

  .zwfaq-head h2{
    font-size:32px;
  }

  .zwfaq-item summary{
    min-height:72px;
    padding-right:45px;
    font-size:13px;
  }

  .zwfaq-item summary::before,
  .zwfaq-item summary::after{
    right:5px;
    width:15px;
  }

  .zwfaq-answer{
    padding-right:45px;
    font-size:12px;
  }

  .zwfinal{
    padding-bottom:50px;
  }

  .zwfinal-box{
    min-height:0;
    padding:38px 22px;
  }

  .zwfinal h2{
    font-size:34px;
  }

  .zwfinal-actions{
    display:grid;
  }

  .zwfinal-primary,
  .zwfinal-secondary{
    width:100%;
  }
}