/* Asasify section on azrscorp.com. Scoped under .az-asa (used together with .az-info / .az-util).
   3D scroll effects use animation-timeline: view()/scroll() inside @supports, off under reduced motion. */
.az-asa{--ia:#5B4BFF;--ib:#4A3BE0;--acc2:#00B8E6}
.az-asa .hero{position:relative;padding:8px 0 44px;display:grid;gap:26px}
@media(min-width:980px){.az-asa .hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding-bottom:70px}}
.az-asa .hero>*{min-width:0}
.az-asa .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.az-asa .btn.line{background:#fff;border:1.5px solid var(--ink);color:var(--ink)}
.az-asa .btn.pri{box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.az-asa .badge{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.az-asa .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.az-asa .badge.live{background:#DFF7E8;color:#0C6B49}
.az-asa .badge.rolling{background:#E8E4FF;color:#3A2DB8}
.az-asa .badge.soon{background:#FFF0C2;color:#7A4F00}
.az-asa .parent{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px;font-size:14.5px;color:var(--soft)}
.az-asa .parent b{color:var(--ink)}
.az-asa .parent svg{width:18px;height:18px;flex:none}

/* ---- 3D hero stage ---- */
.az-asa .stage{position:relative;height:340px;perspective:1100px;display:grid;place-items:center}
@media(min-width:980px){.az-asa .stage{height:460px}}
.az-asa .rig{position:relative;width:min(100%,380px);height:100%;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-22deg);transition:transform .25s ease-out}
.az-asa .slab{position:absolute;left:50%;top:50%;width:62%;max-width:230px;aspect-ratio:4/3;border-radius:24px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font:800 1.15rem 'Plus Jakarta Sans',sans-serif;box-shadow:0 30px 50px -24px rgba(30,30,90,.55);transform-style:preserve-3d}
.az-asa .slab small{font:600 11px 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.az-asa .slab i{display:block;height:8px;border-radius:6px;background:rgba(255,255,255,.35);margin-top:6px}
.az-asa .slab i:nth-child(2){width:70%}.az-asa .slab i:nth-child(3){width:45%}
.az-asa .s1{background:linear-gradient(145deg,#0A7EA4,#06465F);transform:translate(-95%,-92%) translateZ(120px)}
.az-asa .s2{background:linear-gradient(145deg,#5B4BFF,#2B2370);transform:translate(-8%,-70%) translateZ(40px)}
.az-asa .s3{background:linear-gradient(145deg,#4E7A00,#2F4F00);transform:translate(-68%,-12%) translateZ(-30px)}
.az-asa .s4{background:linear-gradient(145deg,#C2410C,#7A2A0A);transform:translate(-2%,2%) translateZ(-90px)}
.az-asa .floatd{animation:azafloat 7s ease-in-out infinite}
@keyframes azafloat{50%{translate:0 -10px}}
.az-asa .s2.floatd{animation-delay:-2s}.az-asa .s3.floatd{animation-delay:-4s}.az-asa .s4.floatd{animation-delay:-1s}
@supports (animation-timeline: view()){
  .az-asa .rig{animation:azarig linear both;animation-timeline:scroll(root);animation-range:0 700px}
  @keyframes azarig{from{transform:rotateX(14deg) rotateY(-22deg)}to{transform:rotateX(34deg) rotateY(18deg) translateY(30px)}}
  .az-asa .tilt3{animation:azat linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes azat{from{opacity:0;transform:perspective(1000px) rotateY(-24deg) rotateX(10deg) translateZ(-80px) translateY(30px)}to{opacity:1;transform:none}}
  .az-asa .tilt3.r{animation-name:azatr}
  @keyframes azatr{from{opacity:0;transform:perspective(1000px) rotateY(24deg) rotateX(10deg) translateZ(-80px) translateY(30px)}to{opacity:1;transform:none}}
  .az-asa .orbit .on1{animation:azaorb linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes azaorb{from{transform:rotateY(-70deg) translateZ(-40px)}50%{transform:none}to{transform:rotateY(70deg) translateZ(-40px)}}
  .az-asa .parallax{animation:azapar linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes azapar{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
}
@media(prefers-reduced-motion:reduce){.az-asa .rig,.az-asa .tilt3,.az-asa .on1,.az-asa .parallax,.az-asa .floatd{animation:none !important}.az-asa .rig{transform:rotateX(10deg) rotateY(-14deg)}}

/* ---- filter bar + product cards ---- */
.az-asa .bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 8px}
.az-asa .search{position:relative;flex:1 1 240px;max-width:420px}
.az-asa .search input{width:100%;min-height:50px;border-radius:999px;border:1.5px solid rgba(14,18,38,.14);padding:0 18px 0 46px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.az-asa .search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.az-asa .search svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:20px;height:20px;color:var(--soft)}
.az-asa .chips{display:flex;flex-wrap:wrap;gap:8px}
.az-asa .chipb{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;cursor:pointer}
.az-asa .chipb[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.az-asa .pgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));margin-top:18px;perspective:1200px}
.az-asa .pcard{--ia:var(--c1);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;transition:transform .25s,box-shadow .25s;transform-style:preserve-3d}
.az-asa .pcard:hover{transform:translateY(-8px) rotateX(3deg);box-shadow:0 36px 56px -28px rgba(50,60,140,.6)}
.az-asa .pcard .top{padding:22px 22px 18px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:space-between;min-height:116px}
.az-asa .pcard .code{width:54px;height:54px;border-radius:18px;background:rgba(255,255,255,.2);display:grid;place-items:center;font:800 1.15rem 'Plus Jakarta Sans',sans-serif}
.az-asa .pcard .bd{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.az-asa .pcard h3{margin:0;font:800 1.45rem 'Plus Jakarta Sans',sans-serif;letter-spacing:-.025em}
.az-asa .pcard p{margin:0;color:var(--muted);font-size:15.5px;flex:1}
.az-asa .pcard .go{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent-ink)}
.az-asa .pcard .go::after{content:"\2192";margin-left:8px;transition:transform .2s}
.az-asa .pcard:hover .go::after{transform:translateX(5px)}
.az-asa .empty{padding:30px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:24px}

/* ---- blocks ---- */
.az-asa .two{display:grid;gap:22px}
@media(min-width:900px){.az-asa .two{grid-template-columns:1fr 1fr;gap:34px;align-items:center}}
.az-asa .two>*{min-width:0}
.az-asa .prose p{margin:0 0 16px;color:var(--muted);font-size:1.04rem;line-height:1.65;max-width:42em}
.az-asa .fgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));margin-top:20px}
.az-asa .fc{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px}
.az-asa .fc .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent-ink);margin-bottom:12px}
.az-asa .fc .ic svg{width:22px;height:22px}
.az-asa .fc b{display:block;font:700 1.08rem 'Plus Jakarta Sans',sans-serif;margin-bottom:6px}
.az-asa .fc p{margin:0;color:var(--muted);font-size:15px}
.az-asa .steps{counter-reset:s;display:grid;gap:14px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.az-asa .steps li{list-style:none;counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px 22px 22px 22px;position:relative}
.az-asa .steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;margin-bottom:10px}
.az-asa .steps b{display:block;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:4px}
.az-asa .steps span{color:var(--muted);font-size:15px}
.az-asa .steps{padding:0;margin-bottom:0}
.az-asa .art3d{perspective:1100px}
.az-asa .art3d svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 30px rgba(40,50,120,.25))}
.az-asa .note{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:20px;padding:16px 18px;color:var(--muted);font-size:15px;margin-top:18px}
.az-asa .cmp .tbl table{min-width:640px}
.az-asa .cmp td .badge{white-space:nowrap}
.az-asa .tl{display:grid;gap:14px;margin-top:20px}
.az-asa .tl .row{display:grid;gap:8px 20px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px;grid-template-columns:1fr}
@media(min-width:800px){.az-asa .tl .row{grid-template-columns:200px 1fr auto;align-items:center}}
.az-asa .tl .row b{font:800 1.2rem 'Plus Jakarta Sans',sans-serif}
.az-asa .tl .row p{margin:0;color:var(--muted);font-size:15px}
.az-asa .famgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));margin-top:20px}
.az-asa .famgrid a{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 20px;transition:transform .2s,border-color .2s}
.az-asa .famgrid a:hover{transform:translateY(-4px);border-color:var(--accent)}
.az-asa .famgrid b{display:block;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:4px}
.az-asa .famgrid span{color:var(--muted);font-size:14.5px}
.az-asa .tree{display:grid;gap:10px;justify-items:center;margin-top:20px}
.az-asa .tree .root{background:var(--ink);color:#fff;border-radius:22px;padding:14px 28px;font:800 1.25rem 'Plus Jakarta Sans',sans-serif}
.az-asa .tree .arrow{width:2px;height:26px;background:var(--accent)}
.az-asa .tree .branch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.az-asa .tree .branch span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:700}
.az-asa .formcard{background:#fff;border:1px solid var(--line);border-radius:32px;padding:26px;box-shadow:0 24px 50px -32px rgba(50,60,140,.45)}
@media(min-width:700px){.az-asa .formcard{padding:36px}}
.az-asa .fld{display:grid;gap:8px;margin-bottom:16px}
.az-asa .fld label{font-size:13.5px;font-weight:700;color:var(--muted)}
.az-asa .fld input,.az-asa .fld textarea,.az-asa .fld select{width:100%;min-height:52px;border-radius:16px;border:1.5px solid rgba(14,18,38,.14);padding:0 16px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.az-asa .fld textarea{padding:14px 16px;min-height:96px;resize:vertical}
.az-asa .fld input:focus,.az-asa .fld textarea:focus,.az-asa .fld select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.az-asa .fld .err,.az-asa .formerr{color:#B23A0A;font-size:13.5px;font-weight:600;margin:0}
.az-asa .fld .err:empty,.az-asa .formerr:empty{display:none}
.az-asa .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.az-asa .okbox{text-align:center;padding:12px 0}
.az-asa .okbox .tick{width:60px;height:60px;border-radius:50%;background:#DFF7E8;color:#0C6B49;display:grid;place-items:center;margin:0 auto 12px;font-size:1.6rem;font-weight:800}
.az-asa .okbox:focus{outline:none}
.az-asa .xlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.az-asa .xlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600}
.az-asa .xlinks a:hover{border-color:var(--accent);color:var(--accent-ink)}
.az-asa .subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.az-asa .subnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-weight:600;color:var(--muted);border:1px solid transparent}
.az-asa .subnav a[aria-current]{background:#fff;border-color:var(--line);color:var(--ink)}
.az-asa .subnav a:hover{color:var(--accent-ink)}
.az-asa .rel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));margin-top:18px}
@media print{.az-asa .stage{display:none}}