/* technology-page.css — Technology page (layered-stack hero, pillars, dark stack band, build cards, certifications, process) */

/* ---------- hero ---------- */
.tech-hero .container{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center}
.tech-hero h1 em{color:var(--red)}
.hero-stat-cards{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}
.hsc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #F3E5E2;border-radius:14px;padding:16px 22px;box-shadow:0 14px 30px -18px rgba(150,30,35,.25)}
.hsc .es-ico{width:42px;height:42px;background:#FBEFEC;font-size:17px;margin:0}
.hsc b{display:block;font-size:19px;font-weight:800;line-height:1.1}
.hsc span{font-size:11.5px;color:var(--muted)}
/* layered 3D stack */
.stack-wrap{position:relative;height:360px;display:flex;align-items:center;justify-content:center}
.stack-wrap .ring{position:absolute;width:120%;height:70%;border:1.5px dashed #F0CDC9;border-radius:50%}
.stack-wrap .ring i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--red);opacity:.6}
.stack-wrap .ring i:nth-child(1){left:6%;top:30%}
.stack-wrap .ring i:nth-child(2){right:10%;bottom:20%}
.layer{position:absolute;left:50%;width:220px;height:220px;border-radius:26px;transform-origin:center}
.layer.l1{background:linear-gradient(150deg,#8F0E1B,#5E060F);transform:translateX(-50%) rotateX(58deg) rotate(45deg) translateZ(0);top:150px;box-shadow:0 40px 60px -20px rgba(120,10,20,.5)}
.layer.l2{background:linear-gradient(150deg,rgba(240,150,150,.5),rgba(211,27,43,.35));backdrop-filter:blur(2px);transform:translateX(-50%) rotateX(58deg) rotate(45deg);top:110px}
.layer.l3{background:linear-gradient(150deg,rgba(250,200,200,.55),rgba(230,120,125,.4));transform:translateX(-50%) rotateX(58deg) rotate(45deg);top:70px}
.layer.l4{background:linear-gradient(150deg,#E02234,#8F0E1B);transform:translateX(-50%) rotateX(58deg) rotate(45deg);top:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 26px 50px -18px rgba(180,18,31,.6)}
.layer.l4 svg{width:74px;height:74px;transform:rotate(-45deg) scaleY(1.6)}

/* ---------- pillars ---------- */
.pillar6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.p6{background:#fff;border:1px solid #F3E5E2;border-radius:16px;padding:24px 14px;text-align:center;transition:transform .25s,box-shadow .25s}
.p6:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.p6 svg{width:38px;height:38px;stroke:var(--red);fill:none;stroke-width:1.7;margin-bottom:12px}
.p6 b{display:block;font-size:13.5px;font-weight:800;line-height:1.3;margin-bottom:7px}
.p6 p{font-size:11px;color:var(--body);line-height:1.5}

/* ---------- dark tech stack band ---------- */
.stack-band{background:radial-gradient(140% 180% at 20% 0%,#7E0C17 0%,#3E060C 50%,#1A0305 100%);border-radius:24px;display:grid;grid-template-columns:repeat(6,1fr);color:#fff;overflow:hidden}
.sb-col{padding:28px 18px;border-right:1px solid rgba(255,255,255,.08)}
.sb-col:last-child{border-right:0}
.sb-col svg{width:30px;height:30px;stroke:#FF8A93;fill:none;stroke-width:1.7;margin-bottom:12px}
.sb-col b{display:block;font-size:13.5px;font-weight:800;margin-bottom:6px}
.sb-col>p{font-size:10.5px;color:#E8A9AE;line-height:1.5;margin-bottom:14px;min-height:48px}
.sb-tool{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;background:rgba(255,255,255,.08);border-radius:8px;padding:7px 9px;margin-top:7px}
.sb-tool i{font-style:normal;font-size:12px}

/* ---------- how we build cards ---------- */
.build4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.b4{border-radius:18px;padding:24px 20px;border:1px solid transparent;transition:transform .25s,box-shadow .25s}
.b4:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.b4.t-red{background:#FBEFEC}
.b4.t-amber{background:#FBF3E7}
.b4.t-rose{background:#FBECEF}
.b4.t-violet{background:#F5EEFA}
.b4 svg{width:34px;height:34px;stroke:var(--red);fill:none;stroke-width:1.7;margin-bottom:12px}
.b4 h3{font-size:15px;font-weight:800;margin-bottom:8px}
.b4>p{font-size:12px;color:var(--body);line-height:1.55;margin-bottom:14px}
.b4 li{display:flex;gap:8px;font-size:12px;font-weight:600;padding:4px 0;align-items:baseline}
.b4 li::before{content:'✓';flex:none;width:14px;height:14px;border-radius:50%;background:var(--red);color:#fff;font-size:8.5px;display:inline-flex;align-items:center;justify-content:center;transform:translateY(2px)}

/* ---------- security + certifications ---------- */
.sec-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.sec-copy li{display:flex;gap:9px;font-size:13px;font-weight:600;padding:5px 0;align-items:baseline}
.sec-copy li::before{content:'✓';flex:none;width:15px;height:15px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;display:inline-flex;align-items:center;justify-content:center;transform:translateY(2px)}
.cert-panel{background:radial-gradient(140% 180% at 80% 0%,#7E0C17 0%,#3E060C 55%,#1A0305 100%);border-radius:22px;padding:34px;color:#fff}
.cert-panel h3{font-size:19px;font-weight:800;margin-bottom:26px}
.cert-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cert{text-align:center;padding:0 8px;position:relative}
.cert:not(:last-child)::after{content:'';position:absolute;right:0;top:12%;bottom:12%;width:1px;background:rgba(255,255,255,.14)}
.cert .ci-badge{font-size:34px;margin-bottom:10px;display:block}
.cert b{display:block;font-size:15px;font-weight:800}
.cert small{font-size:10.5px;color:#E8A9AE;letter-spacing:.06em}

/* ---------- dev process ---------- */
.dev-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative;margin-top:10px}
.dev-steps::before{content:'';position:absolute;top:20px;left:10%;right:10%;border-top:2px dotted #F0CFCB}
.dstep{text-align:center;position:relative}
.dstep .num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;font-weight:800;margin-bottom:12px;box-shadow:0 10px 20px -8px rgba(211,27,43,.5)}
.dstep b{display:block;font-size:14.5px;font-weight:800;margin-bottom:5px}
.dstep p{font-size:11.5px;color:var(--body);line-height:1.5;max-width:160px;margin:0 auto}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .pillar6{grid-template-columns:repeat(3,1fr)}
  .stack-band{grid-template-columns:repeat(3,1fr)}
  .sb-col{border-bottom:1px solid rgba(255,255,255,.08)}
  .build4{grid-template-columns:1fr 1fr}
  .sec-grid{grid-template-columns:1fr}
}
@media(max-width:880px){
  .tech-hero .container{grid-template-columns:1fr}
  .stack-wrap{height:300px;transform:scale(.85)}
}
@media(max-width:640px){
  .pillar6,.build4{grid-template-columns:1fr 1fr}
  .stack-band{grid-template-columns:1fr 1fr}
  .cert-row{grid-template-columns:1fr 1fr;row-gap:22px}
  .cert:nth-child(2)::after{display:none}
  .dev-steps{grid-template-columns:1fr 1fr;row-gap:24px}
  .dev-steps::before{display:none}
}