/* products.css — load AFTER /css/styles.css */
:root{--pr-navy:#0b1226;--pr-line:#262d47;--pr-grey:#f7f8fa;--pr-border:#e8eaf0}

/* ---------- hero + showcase ---------- */
.pr-hero{position:relative;overflow:hidden;background:var(--pr-navy);color:#fff;padding:72px 0 96px}
.pr-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at 78% 45%,rgba(255,90,31,.3),transparent 70%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:auto,52px 52px,52px 52px;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.pr-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pr-hero .label{color:#ffa36f}
.pr-hero h1{font-size:clamp(38px,5.2vw,66px);line-height:1.05;letter-spacing:-2px;margin-bottom:18px}
.pr-hero .lead{color:#b4bbd0;margin:0 0 36px;max-width:520px}
.pr-hero .rv{transition-delay:calc(var(--i,0)*110ms)}

.pr-list{max-width:560px;border-bottom:1px solid var(--pr-line)}
.pr-item{position:relative;display:block;width:100%;text-align:left;font:inherit;color:#fff;background:none;border:0;border-top:1px solid var(--pr-line);padding:22px 4px;cursor:pointer}
.pr-item h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.5px;color:#7d86a3;transition:color .3s,transform .5s var(--ease,ease)}
.pr-item:hover h3{color:#cfd4e4}
.pr-item.on h3{color:#fff;transform:translateX(10px)}
.pr-item .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease,ease)}
.pr-item.on .more{grid-template-rows:1fr}
.pr-item .more>div{overflow:hidden;padding-left:10px}
.pr-item p{margin-top:10px;color:#b4bbd0;font-size:15px;max-width:480px}
.pr-item ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.pr-item li{padding:6px 14px;border-radius:30px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:13px;color:#e5e8f2}
.pr-item .bar{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden}
.pr-item .bar i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
.pr-item.on .bar i{animation:fill 6.5s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}

/* phone */
.pr-stage{--rx:0deg;--ry:0deg;position:relative;display:grid;justify-items:center;gap:14px;padding:10px 0}
.phone{position:relative;width:min(292px,78vw);aspect-ratio:9/18.4;border-radius:44px;background:#fff;border:9px solid #1d2440;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 70px rgba(255,90,31,.28);overflow:hidden;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s ease-out}
.notch{position:absolute;top:8px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#1d2440;z-index:5}
.note{font-size:12px;color:#7d86a3}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:36px 16px 16px;background:#fff;color:var(--ink);font-size:12.5px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.scr.on{opacity:1;visibility:visible}
.sb{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.pill{padding:4px 10px;border-radius:20px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-size:11px;font-weight:600;white-space:nowrap}
.act{margin-top:auto;border:0;border-radius:14px;padding:13px;background:var(--c);color:#fff;font:600 13px Poppins,sans-serif;box-shadow:0 8px 18px color-mix(in srgb,var(--c) 40%,transparent)}

/* astrologerin screen */
.wheel{display:grid;place-items:center;padding:4px 0}
.wheel svg{width:112px;height:112px;overflow:visible}
.spin{transform-origin:60px 60px;animation:spin 18s linear infinite}
.b{max-width:84%;padding:9px 12px;border-radius:14px;line-height:1.45;opacity:0;transform:translateY(8px)}
.b.me{align-self:flex-end;background:var(--c);color:#fff;border-bottom-right-radius:4px}
.b.them{align-self:flex-start;background:#f1f2f6;border-bottom-left-radius:4px}
.scr.on .b{animation:pop .5s var(--d) forwards}
@keyframes pop{to{opacity:1;transform:none}}

/* run cab screen */
.map{position:relative;flex:none;width:100%;height:250px;border-radius:16px;overflow:hidden;background:#eaf0f7 linear-gradient(rgba(255,255,255,.7) 2px,transparent 2px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.7) 2px,transparent 2px) 0 0/40px 40px}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.route{animation:dash 1.2s linear infinite}
.car{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(255,90,31,.25);offset-path:path("M20 220 C 60 160, 90 200, 130 130 S 200 60, 220 30");offset-rotate:0deg;animation:drive 5s ease-in-out infinite}
@keyframes drive{from{offset-distance:0%}to{offset-distance:100%}}
.card{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-radius:14px;background:#f6f7fa}
.card small{color:var(--text)}.card b{grid-row:span 2;align-self:center;font-size:22px;color:var(--c)}.card span{font-weight:600}

/* attendance screen */
.zone{display:grid;place-items:center;height:140px;border-radius:16px;background:#e6f8f5}
.fence{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;border:2px dashed var(--c);animation:spin 24s linear infinite}
.pin{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 rgba(20,184,166,.5);animation:live3 2s infinite}
@keyframes live3{to{box-shadow:0 0 0 18px rgba(20,184,166,0)}}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:#f6f7fa;opacity:0;transform:translateX(-12px)}
.scr.on .row{animation:pop .5s var(--d) forwards}
.ok{color:#0f9d8f}.no{color:#e8456b}

/* ---------- more applications ---------- */
.pr-more{padding:100px 0;background:var(--pr-grey)}
.pr-head{margin-bottom:44px}
.pr-head h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-1px;line-height:1.1;margin-bottom:10px}
.pr-head p:last-child{color:var(--text)}
.pr-apps{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.pr-app{display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:#fff;border:1px solid var(--pr-border);transition:border-color .3s,box-shadow .4s,transform .5s var(--ease,ease)}
.pr-app:hover{border-color:#ffc9ae;box-shadow:0 28px 56px rgba(20,22,29,.12);transform:translateY(-6px)}
.pr-app .art{position:relative;height:240px;overflow:hidden}
.pr-app .body{padding:28px 30px 32px}
.kind{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--orange-dark)}
.pr-app h3{font-size:24px;margin-bottom:8px}
.pr-app p{color:var(--text);font-size:15px;margin-bottom:18px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{padding:5px 14px;border-radius:30px;background:#f1f2f6;font-size:12.5px;font-weight:500;color:#444a58;transition:background .25s,color .25s}
.pr-app:hover .tags span{background:var(--orange);color:#fff}

/* agriculture art: clean app-dashboard card */
.agri{background:linear-gradient(135deg,#e9f6e3,#f6fbf2);padding:26px}
.ag-app{display:flex;flex-direction:column;gap:12px;height:100%;padding:16px;border-radius:16px;background:#fff;box-shadow:0 18px 30px rgba(20,22,29,.1)}
.ag-top{display:flex;align-items:center;gap:12px}
.ag-top .lg{width:26px;height:26px;border-radius:8px;background:#3f9a2e}
.ag-top .ln{width:70px;height:8px;border-radius:6px;background:#d9dce6}
.ag-live{margin-left:auto;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:#e9f6e3;color:#2d7a1f;font-size:11px;font-weight:600}
.ag-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3f9a2e;animation:agpulse 2s infinite}
@keyframes agpulse{0%{box-shadow:0 0 0 0 rgba(63,154,46,.5)}100%{box-shadow:0 0 0 8px rgba(63,154,46,0)}}

.ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ag-tile{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:#f6f7fa}
.ag-tile small,.ag-price small{font-size:11px;color:var(--text)}
.ag-tile b{font-size:20px;line-height:1.1;color:var(--ink)}
.ag-tile em{font-style:normal;font-size:11px;font-weight:600;color:#3b82f6}
.meter{height:6px;margin-top:5px;border-radius:6px;background:#dfe3ec;overflow:hidden}
.meter i{display:block;height:100%;width:92%;border-radius:6px;background:#3f9a2e;transform-origin:0 50%;animation:agfill 5s ease-in-out infinite}
@keyframes agfill{0%{transform:scaleX(.15)}30%,85%{transform:scaleX(1)}100%{transform:scaleX(.15)}}

.ag-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#f6f7fa}
.ag-price b{display:block;font-size:20px;line-height:1.2;color:var(--ink)}
.ag-price u{text-decoration:none;font-size:11px;font-weight:600;color:#0f9d8f}
.bars{display:flex;align-items:flex-end;gap:5px;height:36px}
.bars i{width:8px;height:100%;border-radius:4px;background:#b9dca9;transform-origin:50% 100%;animation:agbar 5s ease-in-out infinite}
.bars i:nth-child(1){--h:.35}
.bars i:nth-child(2){--h:.5;animation-delay:.1s}
.bars i:nth-child(3){--h:.42;animation-delay:.2s}
.bars i:nth-child(4){--h:.7;animation-delay:.3s}
.bars i:nth-child(5){--h:.85;animation-delay:.4s}
.bars i:nth-child(6){--h:1;animation-delay:.5s;background:#3f9a2e}
@keyframes agbar{0%{transform:scaleY(.1)}25%,85%{transform:scaleY(var(--h))}100%{transform:scaleY(.1)}}

/* mega menu art */
.menu{background:#eef1f7;padding:26px}
.nv{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px 12px 0 0;background:#fff}
.nv i{width:54px;height:8px;border-radius:6px;background:#d9dce6}
.nv i.lg{width:26px;height:26px;border-radius:8px;background:var(--orange);margin-right:8px}
.nv i.hl{animation:hl 5s infinite}
@keyframes hl{0%,15%{background:#d9dce6}25%,75%{background:var(--orange)}90%,100%{background:#d9dce6}}
.drop{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:16px;padding:18px;border-radius:0 0 12px 12px;background:#fff;box-shadow:0 18px 30px rgba(20,22,29,.1);transform-origin:50% 0;animation:open2 5s var(--ease,ease) infinite}
@keyframes open2{0%,15%{transform:scaleY(0);opacity:0}25%,75%{transform:none;opacity:1}90%,100%{transform:scaleY(0);opacity:0}}
.col{display:grid;gap:10px;align-content:start}
.col i{height:8px;border-radius:6px;background:#e3e6ee}
.col i:first-child{width:60%;background:#b9bfd0}
.promo{min-height:84px;border-radius:12px;background:linear-gradient(135deg,#ff9a55,var(--orange-dark))}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .pr-grid{grid-template-columns:1fr;gap:44px}
  .pr-stage{order:2}
}
@media(max-width:760px){
  .pr-hero{padding:48px 0 64px}
  .pr-more{padding:68px 0}
  .pr-apps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .b,.row{opacity:1!important;transform:none!important}
  .drop{opacity:1!important;transform:none!important}
  .meter i,.bars i{animation:none}
  .bars i{transform:scaleY(var(--h,1))}
  .meter i{transform:none}
}