/* Nishu Digital — custom styles (Tailwind handles the rest) */
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans','Inter',sans-serif;-webkit-font-smoothing:antialiased}
[x-cloak],[hidden]{display:none!important}

.gradient-mesh{background:radial-gradient(600px circle at 0% 0%, rgb(var(--c-teal)/.08), transparent 60%),radial-gradient(800px circle at 100% 0%, rgb(var(--c-accent)/.07), transparent 60%),linear-gradient(180deg,#fff 0%,#F8FAFC 100%)}
.hero-gradient{background:linear-gradient(135deg,rgb(var(--c-primary)) 0%,rgb(var(--c-primary)/.85) 45%,rgb(var(--c-teal)) 100%)}
.text-gradient{background:linear-gradient(135deg,rgb(var(--c-primary)) 0%,rgb(var(--c-teal)) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sale-badge{background:linear-gradient(135deg,rgb(var(--c-accent)) 0%,rgb(var(--c-accent)/.8) 100%)}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
details[open] summary .chevron{transform:rotate(180deg)}
.prose-nishu p{margin:.75rem 0;line-height:1.7}
.prose-nishu ul{list-style:disc;padding-left:1.25rem;margin:.75rem 0}
.prose-nishu h2,.prose-nishu h3{font-weight:700;margin:1.25rem 0 .5rem}

/* ============ Device showcase ============ */
.devices-section{background:radial-gradient(700px circle at 15% 10%, rgb(var(--c-teal)/.22), transparent 60%),radial-gradient(700px circle at 90% 90%, rgb(var(--c-accent)/.16), transparent 60%),#0B1120}
.device-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px max(16px, calc(50% - 160px)) 36px;scrollbar-width:none}
.device-track::-webkit-scrollbar{display:none}
.device-slide{flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s;opacity:.45;transform:scale(.86)}
.device-slide.is-active{opacity:1;transform:scale(1)}
.device-slide .meta{text-align:center;max-width:300px;transition:opacity .4s}
.device-slide:not(.is-active) .meta{opacity:0}

.device{position:relative;background:var(--frame);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1.5px rgba(0,0,0,.35)}
.device::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.25));pointer-events:none}
.device .bezel{background:#050505;height:100%;overflow:hidden;position:relative}
.device .screen{position:absolute;inset:0;overflow:hidden;background:#fff}
.device .screen img{width:100%;height:100%;object-fit:cover}

.device-iphone{width:250px;aspect-ratio:9/19.5;border-radius:46px;padding:9px}
.device-iphone .bezel{border-radius:38px;padding:5px}
.device-iphone .screen{inset:5px;border-radius:33px}
.device-iphone .island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:76px;height:22px;background:#000;border-radius:20px;z-index:5}
.device-iphone .btn{position:absolute;background:var(--frame);border-radius:3px;filter:brightness(.85)}
.device-iphone .btn.power{right:-3px;top:150px;width:3px;height:70px}
.device-iphone .btn.vol1{left:-3px;top:120px;width:3px;height:40px}
.device-iphone .btn.vol2{left:-3px;top:172px;width:3px;height:40px}
.device-iphone .btn.action{left:-3px;top:80px;width:3px;height:24px}

.device-ipad{width:min(470px,84vw);aspect-ratio:4/3;border-radius:30px;padding:10px}
.device-ipad .bezel{border-radius:22px;padding:12px}
.device-ipad .screen{inset:12px;border-radius:12px}
.device-ipad .cam{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#1b1b1f;z-index:5}

.swatch{width:22px;height:22px;border-radius:999px;border:2px solid rgba(255,255,255,.25);transition:transform .2s, box-shadow .2s;background:var(--frame)}
.swatch.is-active{transform:scale(1.15);box-shadow:0 0 0 2px #0B1120,0 0 0 4px rgba(255,255,255,.85)}

@media (max-width:640px){
  .device-iphone{width:210px;border-radius:40px}
  .device-iphone .bezel{border-radius:33px}
  .device-iphone .screen{border-radius:28px}
  .device-track{gap:16px;padding-left:max(16px, calc(50% - 120px));padding-right:max(16px, calc(50% - 120px))}
}

/* ============ WhatsApp chat widget ============ */
.wa-panel{transform-origin:bottom right;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.wa-panel.is-closed{transform:scale(.9) translateY(12px);opacity:0;pointer-events:none}
.wa-wall{background-color:#EFEAE2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d9d2c5' stroke-width='1.2' opacity='.7'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Cpath d='M70 15l8 8-8 8-8-8z'/%3E%3Cpath d='M15 75c6-6 14-6 20 0'/%3E%3Crect x='80' y='70' width='14' height='10' rx='3'/%3E%3Cpath d='M55 95l5 10 5-10'/%3E%3Ccircle cx='100' cy='30' r='3'/%3E%3Cpath d='M40 50h10M45 45v10'/%3E%3C/g%3E%3C/svg%3E")}
.wa-bubble{position:relative;max-width:85%;padding:6px 9px 8px;border-radius:8px;font-size:14px;line-height:1.4;box-shadow:0 1px .5px rgba(11,20,26,.13);white-space:pre-line;word-wrap:break-word}
.wa-in{background:#fff;border-top-left-radius:0;color:#111b21}
.wa-in::before{content:"";position:absolute;top:0;left:-8px;border-top:0 solid transparent;border-right:8px solid #fff;border-bottom:10px solid transparent}
.wa-out{background:#D9FDD3;border-top-right-radius:0;margin-left:auto;color:#111b21}
.wa-out::before{content:"";position:absolute;top:0;right:-8px;border-left:8px solid #D9FDD3;border-bottom:10px solid transparent}
.wa-time{font-size:11px;color:#667781;float:right;margin:6px 0 -4px 10px;display:inline-flex;align-items:center;gap:2px}
.wa-typing span{width:7px;height:7px;border-radius:50%;background:#8696a0;display:inline-block;animation:wa-dot 1.2s infinite}
.wa-typing span:nth-child(2){animation-delay:.15s}.wa-typing span:nth-child(3){animation-delay:.3s}
@keyframes wa-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.wa-fab-ping{animation:wa-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes wa-ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.6);opacity:0}}