/* Panda Store. Signature: blue ink splash "prints" behind the hero word.
   Theme: color-block story (dark hero/process, light body). Radius: 20px outer, 12px inner (concentric). */
:root{
  --ink:#0A0A0A;--blue:#1540E0;--sky:#6B8CFF;
  --bg:#F6F7FB;--fg:#0A0A0A;--card:#fff;--line:#dfe3ef;--mut:#4d5468;
  --r:20px;--ri:12px;--ease:cubic-bezier(.16,1,.3,1)
}
@media(prefers-color-scheme:dark){
  :root{--bg:#0d0e12;--fg:#f2f3f8;--card:#171923;--line:#262a38;--mut:#a3a8ba}
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:"IBM Plex Sans Arabic",sans-serif;color:var(--fg);background:var(--bg);line-height:1.75;font-size:1.05rem;overflow-x:hidden}
h1,h2,h3,.disp{font-family:"Amiri","IBM Plex Sans Arabic",serif;font-weight:700;line-height:1.5;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;outline:1px solid rgb(127 127 127/.18);outline-offset:-1px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.wrap{max-width:1200px;margin:auto;padding:0 20px}
section{padding:96px 0}
h2{font-size:clamp(2.2rem,5vw,3.4rem)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:99px;
  background:var(--blue);color:#fff;font-weight:700;border:2px solid var(--blue);white-space:nowrap;cursor:pointer;
  transition-property:transform,background-color,color,border-color;transition-duration:.2s;transition-timing-function:var(--ease)}
button.btn{font:inherit;font-weight:700;font-size:1rem}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.96)}
.btn.line{background:transparent;color:inherit;border-color:currentColor}
.btn.white{background:#fff;color:var(--blue);border-color:#fff}
.btn.sm{min-height:44px;padding:0 22px}

header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo img{height:56px;width:auto;outline:0}
nav{display:flex;gap:32px;font-weight:700}
header nav a{position:relative;padding:10px 4px;transition:color .2s}
header nav a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--sky));transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease)}
header nav a::before{content:"";position:absolute;inset:-6px -14px;z-index:-1;border-radius:99px;background:radial-gradient(closest-side,#1540e033,#1540e000);opacity:0;transition:opacity .3s}
header nav a:hover,header nav a[aria-current]{color:var(--blue)}
header nav a:hover::after,header nav a[aria-current]::after{transform:scaleX(1)}
header nav a[aria-current]::before{opacity:1}
@media(prefers-color-scheme:dark){header .logo img{filter:invert(1) hue-rotate(180deg)}header nav a:hover,header nav a[aria-current]{color:var(--sky)}}
footer .logo img{filter:invert(1) hue-rotate(180deg)}

/* HERO */
.hero{background:var(--ink);color:#fff;padding:64px 0 96px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;position:relative}
.hero h1{font-size:clamp(3rem,7vw,5.8rem);line-height:1.4;font-weight:700;position:relative;z-index:1}
.hero h1 span{display:block}
.hero h1{display:inline-block}
.hero h1::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:165%;height:130%;
  background:url(images/splash.png) center/100% 100% no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,transparent 2%,#000 45%);mask-image:linear-gradient(to top,transparent 2%,#000 45%)}

.hero p{position:relative;z-index:1;color:#c4c9de;margin:28px 0 36px;max-width:40ch;font-size:1.2rem}
.hero .cta{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap}

/* photo frames: image auto-appears when the file exists */
.frame{position:relative;border-radius:var(--r);overflow:hidden;background:
  repeating-linear-gradient(45deg,#151823,#151823 14px,#1a1e2b 14px,#1a1e2b 28px);border:1px dashed #3a4268;display:grid;place-items:center;
  color:#7e86ad;font-size:.85rem;text-align:center;padding:12px}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;outline:0}
.hero .frame{aspect-ratio:4/5;z-index:1}

/* ribbon (the one marquee) */
.ribbon{background:var(--blue);color:#fff;overflow:hidden;white-space:nowrap;direction:ltr}
.ribbon div{display:inline-flex;gap:48px;padding:16px 24px;font-weight:600;font-size:1.3rem;animation:run 28s linear infinite}
.ribbon span::after{content:"/";margin-inline-start:48px;opacity:.55}
@keyframes run{to{transform:translateX(-50%)}}

/* PRODUCTS */
.head{max-width:620px;margin-bottom:48px}.head p{color:var(--mut);margin-top:12px}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.item{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;display:flex;color:#fff;background:var(--ink);isolation:isolate;
  transition:transform .4s var(--ease)}
.item:hover{transform:translateY(-4px)}
.item .frame{position:absolute;inset:0;border:0;border-radius:0;z-index:-2}
.item::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,#000d 8%,#0000 62%)}
.item .txt{align-self:flex-end;padding:28px;display:grid;gap:6px;justify-items:start}
.item h3{font-size:2rem}.item p{color:#d6daea;max-width:34ch;font-size:1rem}
.item .btn{margin-top:10px}
.i-sheets{grid-column:span 7;grid-row:span 2;min-height:560px;background:var(--blue)}
.i-mug{grid-column:span 5}.i-tee{grid-column:span 5}

/* gallery: masonry, real photos */
.gallery{columns:3;column-gap:16px}
.gallery img{width:100%;height:auto;margin-bottom:16px;border-radius:var(--r);break-inside:avoid;transition:transform .4s var(--ease)}
.gallery img:hover{transform:scale(1.02)}
.order{margin-top:16px;background:var(--blue);color:#fff;border-radius:var(--r);padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.order-btns{display:flex;gap:10px;flex-wrap:wrap}.order h3{font-size:2rem}.order p{opacity:.92;margin-top:4px}
.more{margin-top:24px;color:var(--mut)}.more a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media(prefers-color-scheme:dark){.more a{color:var(--sky)}}
@media(max-width:860px){.gallery{columns:2}.order{padding:24px}}

/* prices */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease)}
.pcard:hover{transform:translateY(-4px)}
.pcard img{width:100%;aspect-ratio:1/1;object-fit:cover;outline:0}
.pbody{padding:20px;display:grid;gap:4px;justify-items:start}
.pbody h3{font-size:1.5rem}.size{color:var(--mut);font-weight:700}
.price{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:2.3rem;line-height:1.2;color:var(--blue);font-variant-numeric:tabular-nums;margin:6px 0 10px}
.price small{font-size:1rem;color:var(--mut);font-weight:700}
.tiers{list-style:none;padding:0;width:100%;margin:0 0 12px;border-top:1px solid var(--line);font-size:.95rem}
.tiers li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.tiers b{font-variant-numeric:tabular-nums;color:var(--blue)}
.pbody .btn{margin-top:auto}
@media(prefers-color-scheme:dark){.price,.tiers b{color:var(--sky)}}

/* preview tool */
.pv-sec{padding-top:56px}.h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.pv{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.pv-stage{background:#0d0e12;border-radius:var(--r);overflow:hidden;position:relative}
.pv-stage canvas{display:block;width:100%;height:auto;touch-action:pan-y;cursor:grab}
.pv-stage.drag-on canvas{touch-action:none}
.pv-mv{display:none;margin-top:12px}
@media(hover:none){.pv-mv{display:inline-flex}.pv-hint{display:none}}
.pv-mv[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.pv-hint{position:absolute;inset-inline:0;bottom:10px;text-align:center;color:#8b93b5;font-size:.85rem;pointer-events:none}
.pv-panel{display:grid;gap:22px}
.pv-step h2{font-family:inherit;font-size:1.1rem;font-weight:700;margin-bottom:10px;line-height:1.5}
.pv-up{cursor:pointer}.pv-msg{margin-top:8px;color:var(--mut);font-size:.95rem;min-height:1.5em}
.pv-shapes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pv-shapes button{min-height:48px;border-radius:var(--ri);border:1.5px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;
  transition-property:border-color,background-color,color;transition-duration:.2s}
.pv-shapes button[aria-checked="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.pv-zoom{display:flex;align-items:center;gap:12px;font-weight:600}.pv-zoom input{flex:1;accent-color:var(--blue)}
.pv-price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-block:1px solid var(--line)}
.pv-price b{font-size:1.5rem;color:var(--blue);font-variant-numeric:tabular-nums}
@media(prefers-color-scheme:dark){.pv-price b{color:var(--sky)}}
.pv-actions{display:flex;gap:10px;flex-wrap:wrap}
.pv-note{color:var(--mut);font-size:.9rem}
@media(max-width:860px){.pv{grid-template-columns:1fr}.pv-sec{padding-top:32px}}

/* story */
.story{background:var(--card);border-block:1px solid var(--line)}
.story-text{max-width:66ch}
.story-text p{font-size:1.15rem;line-height:2;margin-bottom:.9em}
.story-text .lead{font-family:Amiri,serif;font-size:1.7rem;line-height:1.7;color:var(--blue)}
.more-story summary{cursor:pointer;display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:99px;border:2px solid var(--blue);color:var(--blue);font-weight:700;list-style:none;margin:8px 0 18px;
  transition-property:background-color,color;transition-duration:.2s}
.more-story summary::-webkit-details-marker{display:none}
.more-story summary:hover{background:var(--blue);color:#fff}
.more-story[open] summary{display:none}
.story-list{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:6px;border-inline-start:3px solid var(--blue);padding-inline-start:18px}
.story-list li{font-size:1.15rem;line-height:1.9}
.story .sign{font-family:Amiri,serif;font-size:1.5rem;margin-top:1.4em;line-height:1.6}
.story .sign span{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:1rem;color:var(--mut)}
@media(prefers-color-scheme:dark){.story-text .lead,.more-story summary{color:var(--sky);border-color:var(--sky)}.story-list{border-color:var(--sky)}}

/* faq */
.qa{max-width:760px;display:grid;gap:10px}
.qa details{background:var(--card);border:1px solid var(--line);border-radius:var(--ri);padding:0 20px}
.qa summary{cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.6rem;color:var(--blue);transition:transform .2s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--mut);padding:0 0 18px}

/* sticky whatsapp (mobile only) */
.fab{display:none}
@media(max-width:860px){
  .fab{display:inline-flex;align-items:center;gap:10px;position:fixed;z-index:30;inset-inline-start:16px;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom));
    justify-content:center;min-height:54px;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;box-shadow:0 8px 24px #1540e066;
    transition:transform .2s var(--ease)}
  .fab:active{transform:scale(.97)}.fab img{outline:0}
  footer{padding-bottom:96px}
}

/* PROCESS (order matters here) */
.process{background:var(--ink);color:#fff}
.process .head p{color:#b5bad0}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2a2e3d}
.steps li{padding:32px 0 8px 28px}
.steps li+li{padding-inline-start:28px;border-inline-start:1px solid #2a2e3d}
.steps .n{font-family:"Amiri",serif;font-weight:700;font-size:5.5rem;line-height:1;color:transparent;-webkit-text-stroke:2px var(--sky);display:block;margin-bottom:8px}
.steps h3{font-size:1.7rem}.steps p{color:#b5bad0;margin-top:6px;max-width:30ch}

/* B2B */
.b2b .box{background:var(--blue);color:#fff;border-radius:var(--r);padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.b2b h2{font-size:clamp(2.4rem,5vw,3.8rem)}
.b2b p{margin:14px 0 28px;max-width:44ch;opacity:.94}
.b2b ul{list-style:none;padding:0;display:grid;gap:10px}
.b2b li{padding:16px 20px;border-radius:var(--ri);background:#ffffff1f;font-weight:700}

footer{background:var(--ink);color:#a9aec4;padding:44px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer .logo img{height:52px}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{width:48px;height:48px;display:inline-grid;place-items:center;border:1px solid #2f3446;border-radius:50%;
  transition-property:background-color,border-color,transform;transition-duration:.2s}
.social a img{outline:0;width:22px;height:22px}
.social a:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}

/* motion: the page "prints" itself */
@media(prefers-reduced-motion:no-preference){
  .hero h1::before{animation:ink 1.1s .3s var(--ease) both}
  @keyframes ink{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
  .hero h1 span{animation:up .8s var(--ease) both}.hero h1 span:nth-child(2){animation-delay:.1s}.hero h1 span:nth-child(3){animation-delay:.2s}
  .hero p,.hero .cta,.hero .frame{animation:up .8s .3s var(--ease) both}
  @keyframes up{from{opacity:0;transform:translateY(24px)}}
}
@media(prefers-reduced-motion:reduce){.ribbon div{animation:none}}

@media(max-width:860px){
  html{scroll-behavior:auto}section{scroll-margin-top:130px}
  header{backdrop-filter:none;background:var(--bg)}header nav a::before{display:none}
  .hero .wrap>div:first-child{text-align:center}.hero p{margin-inline:auto}.hero .cta{justify-content:center}
  section{padding:60px 0}
  header .wrap{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:0;row-gap:0}
  header nav{order:3;width:100%;overflow-x:auto;gap:22px;padding:2px 0 0;white-space:nowrap;scrollbar-width:none;border-top:1px solid var(--line);margin-top:8px}
  header nav::-webkit-scrollbar{display:none}
  header nav a{padding:12px 2px}
  .hero{padding:40px 0 64px}.hero .wrap,.b2b .box{grid-template-columns:1fr}
  .hero .frame{aspect-ratio:16/10}
  .bento{grid-template-columns:1fr}.i-sheets,.i-mug,.i-tee{grid-column:auto;grid-row:auto;min-height:320px}
  .steps{grid-template-columns:1fr}.steps li{padding-inline-start:0}.steps li+li{border-inline-start:0;border-top:1px solid #2a2e3d}
  .b2b .box{padding:32px 24px}
}