/* framewed — the public homepage. Dark cinematic hero, warm paper below. */
:root{
  --ink:#1A1714;--paper:#F6F3EE;--card:#fff;--muted:#6E655B;--faint:#A1978B;--line:#EBE4D9;
  --gold:#A67A2A;--gold-2:#C99A4B;--bronze:#8A6520;--night:#15110D;--night-2:#241C14;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --r:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem;border-radius:8px}
.wrap{max-width:1160px;margin:0 auto;padding:0 1.25rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:46px;padding:0 1.2rem;border-radius:14px;
  font-weight:600;font-size:.95rem;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-lg{min-height:54px;padding:0 1.6rem;font-size:1rem}
.btn-gold{color:#fff;background:linear-gradient(160deg,var(--gold-2),var(--bronze));box-shadow:0 10px 26px rgba(166,122,42,.35)}
.btn-gold:hover{box-shadow:0 14px 34px rgba(166,122,42,.45)}
.btn-ghost{color:#F3E8D2}
.btn-glass{color:#F7EEDC;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(255,255,255,.14)}

/* nav: clear over the hero, solid once you scroll */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:1.5rem;
  padding:calc(.8rem + env(safe-area-inset-top,0px)) 1.25rem .8rem;transition:background .3s,box-shadow .3s}
.nav.solid{background:rgba(21,17,13,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.6rem;font-weight:700;
  color:#FBF3E4;text-decoration:none;letter-spacing:.01em}
.brand img{border-radius:9px}
.nav-links{display:none;gap:1.6rem;margin-left:1rem}
.nav-links a{color:rgba(251,243,228,.75);text-decoration:none;font-size:.92rem;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-cta{margin-left:auto;display:flex;gap:.4rem}
.nav-cta .btn-gold{min-height:40px;padding:0 1rem;font-size:.88rem}
.nav-cta .btn-ghost{display:none}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--night);color:#FBF3E4;
  padding:calc(7rem + env(safe-area-inset-top,0px)) 0 4rem}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 600px at 78% 30%,rgba(201,154,75,.28),transparent 60%),
             radial-gradient(700px 500px at 10% 0%,rgba(122,88,24,.35),transparent 60%),
             radial-gradient(1200px 400px at 50% 110%,#2C2218,transparent 70%)}
.hero-glow::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-in{position:relative;max-width:1160px;margin:0 auto;padding:0 1.25rem;display:grid;gap:3rem;align-items:center}
.eyebrow{margin:0 0 1rem;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.eyebrow.dark{color:var(--bronze)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.9rem,9vw,5.2rem);line-height:.98;letter-spacing:-.01em;margin:0 0 1.2rem}
h1 em{font-style:italic;color:#E8C986}
.lede{font-size:1.08rem;color:rgba(251,243,228,.78);max-width:34rem;margin:0 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;padding:0;margin:1.6rem 0 0;font-size:.85rem;color:rgba(251,243,228,.6)}
.trust li::before{content:"✓";color:var(--gold-2);margin-right:.4rem}

/* the phones */
.phone{position:relative;width:250px;aspect-ratio:390/844;padding:9px;border-radius:44px;
  background:linear-gradient(145deg,#3a3129,#0d0b09);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.08) inset,0 40px 80px rgba(0,0,0,.45),0 12px 24px rgba(0,0,0,.3)}
.phone::before{content:"";position:absolute;top:18px;left:50%;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#0b0907;z-index:2}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:35px}

.stage{perspective:1600px;height:540px;position:relative}
.stage-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(6deg);transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.stage .phone{position:absolute;left:50%;top:50%}
.p-front{transform:translate(-50%,-50%) translateZ(80px);animation:floatA 7s ease-in-out infinite}
.p-left{transform:translate(-118%,-46%) translateZ(-40px) rotateY(10deg) scale(.86);animation:floatB 8s ease-in-out infinite;opacity:.9}
.p-right{transform:translate(18%,-54%) translateZ(-40px) rotateY(-10deg) scale(.86);animation:floatC 9s ease-in-out infinite;opacity:.9}
@keyframes floatA{50%{transform:translate(-50%,-53%) translateZ(80px)}}
@keyframes floatB{50%{transform:translate(-118%,-42%) translateZ(-40px) rotateY(10deg) scale(.86)}}
@keyframes floatC{50%{transform:translate(18%,-50%) translateZ(-40px) rotateY(-10deg) scale(.86)}}
.chip-float{position:absolute;z-index:3;padding:.6rem .9rem;border-radius:14px;font-size:.82rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.94);box-shadow:0 18px 40px rgba(0,0,0,.35);transform:translateZ(140px);white-space:nowrap}
.c1{left:2%;top:18%;animation:floatA2 6s ease-in-out infinite}
.c2{right:0;bottom:16%;animation:floatA2 7s ease-in-out infinite reverse}
.c1::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#3E6B45;margin-right:.45rem}
.c2::before{content:"৳";color:var(--bronze);margin-right:.35rem}
@keyframes floatA2{50%{transform:translateZ(140px) translateY(-10px)}}

/* sections */
.sec{padding:6rem 0}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.05;margin:0 0 1rem;max-width:44rem}
.bento{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.6rem}
.tile{padding:1.6rem;border-radius:var(--r);background:var(--card);
  box-shadow:0 1px 2px rgba(26,23,20,.04),0 10px 30px rgba(26,23,20,.06);transition:transform .3s,box-shadow .3s}
.tile:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(26,23,20,.05),0 22px 48px rgba(26,23,20,.1)}
.ti{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(160deg,#F6E7C8,#EBD6AC);color:var(--bronze);margin-bottom:1rem}
.tile h3{margin:0 0 .4rem;font-size:1.12rem;font-weight:650;letter-spacing:-.01em}
.tile p{margin:0;color:var(--muted);font-size:.95rem}

.split{padding:5rem 0;overflow:hidden}
.split.alt{background:linear-gradient(180deg,#EFE8DC,#F6F3EE)}
.split-in{display:grid;gap:3rem;align-items:center}
.split-copy p{color:var(--muted);font-size:1.05rem;max-width:32rem}
.ticks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.55rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;font-weight:500}
.ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:.15rem;border-radius:50%;
  background:var(--bronze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.split-art{display:flex;justify-content:center;perspective:1400px}
.split-art .phone{width:270px}
.tilt-l{transform:rotateY(14deg) rotateX(4deg);transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.tilt-r{transform:rotateY(-14deg) rotateX(4deg);transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.split-art:hover .phone{transform:rotateY(0) rotateX(0)}

/* the delivery page, drawn */
.deliv{width:300px;border-radius:26px;overflow:hidden;background:#F6F3EE;box-shadow:0 40px 80px rgba(26,23,20,.22);
  transform:rotateY(-12deg) rotateX(4deg);transition:transform .6s}
.split-art:hover .deliv{transform:none}
.dv-top{padding:1.6rem 1.2rem 2.2rem;text-align:center;color:#FCFAF6;background:radial-gradient(120% 140% at 50% 0%,#43767D,#0E4F58 55%,#0B3F46)}
.dv-top span{display:block;font-family:var(--serif);font-size:1rem;opacity:.85}
.dv-top b{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:600;margin:.4rem 0 .2rem}
.dv-top small{opacity:.8}
.dv-d{display:flex;gap:.8rem;margin:-1rem .8rem 1.4rem;padding:.9rem;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(26,23,20,.08)}
.dv-d + .dv-d{margin-top:0}
.dv-d i{flex:none;width:44px;height:48px;border-radius:12px;background:#F1ECE4;display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-style:normal;font-size:.6rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.dv-d i b{font-family:var(--serif);font-size:1.3rem;color:var(--ink);line-height:1}
.dv-d div{flex:1}.dv-d div > b{display:block;margin-bottom:.3rem}
.dv-d p{display:flex;justify-content:space-between;align-items:center;margin:.3rem 0;font-size:.85rem}
.dv-d em{font-style:normal;font-size:.72rem;font-weight:700;color:#fff;background:#0E4F58;padding:.25rem .6rem;border-radius:20px}

/* built for here */
.local{background:var(--night);color:#FBF3E4;position:relative;overflow:hidden}
.local h2{color:#FBF3E4}
.local-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.4rem}
.lc{padding:1.5rem;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lc b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:600;color:#E8C986;margin-bottom:.3rem}
.lc span{color:rgba(251,243,228,.7);font-size:.95rem}

/* steps */
.steps{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1rem;counter-reset:s}
.steps li{padding:1.6rem;border-radius:var(--r);background:var(--card);box-shadow:0 10px 30px rgba(26,23,20,.06)}
.steps span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  font-family:var(--serif);font-size:1.4rem;font-weight:700;color:#fff;background:linear-gradient(160deg,var(--gold-2),var(--bronze));margin-bottom:.8rem}
.steps b{display:block;font-size:1.1rem;margin-bottom:.3rem}
.steps p{margin:0;color:var(--muted)}

/* final */
.final{position:relative;overflow:hidden;background:var(--night);color:#FBF3E4;padding:6rem 0;text-align:center}
.final-in{position:relative}
.final img{margin:0 auto 1.4rem;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.final h2{color:#FBF3E4;margin:0 auto .6rem}
.final p{color:rgba(251,243,228,.7);margin:0 0 2rem}

.foot{background:#0F0C09;color:rgba(251,243,228,.6);padding:2.6rem 0 calc(2.6rem + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center}
.foot .brand{font-size:1.3rem}
.foot-links{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot-links a{text-decoration:none;font-size:.9rem}.foot-links a:hover{color:#fff}
.fine{width:100%;margin:0;font-size:.8rem;color:rgba(251,243,228,.4)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
.bento .reveal:nth-child(2),.local-grid .reveal:nth-child(2),.steps .reveal:nth-child(2){transition-delay:.08s}
.bento .reveal:nth-child(3),.local-grid .reveal:nth-child(3),.steps .reveal:nth-child(3){transition-delay:.16s}
.bento .reveal:nth-child(4),.local-grid .reveal:nth-child(4){transition-delay:.24s}

/* phones below a width: one phone, gently tilted */
@media (max-width:759px){
  .stage{height:470px}
  .p-left{transform:translate(-100%,-44%) translateZ(-60px) rotateY(12deg) scale(.78)}
  .p-right{transform:translate(0%,-56%) translateZ(-60px) rotateY(-12deg) scale(.78)}
  @keyframes floatB{50%{transform:translate(-100%,-40%) translateZ(-60px) rotateY(12deg) scale(.78)}}
  @keyframes floatC{50%{transform:translate(0%,-52%) translateZ(-60px) rotateY(-12deg) scale(.78)}}
  .phone{width:220px}
  .chip-float{font-size:.74rem}
}
@media (min-width:760px){
  .nav-links{display:flex}
  .nav-cta .btn-ghost{display:inline-flex}
  .bento{grid-template-columns:repeat(3,1fr)}
  .t-wide{grid-column:span 2}
  .local-grid{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .split-in{grid-template-columns:1fr 1fr}
  .split-in.rev .split-copy{order:2}
}
@media (min-width:1000px){
  .hero{padding-top:9rem;padding-bottom:6rem}
  .hero-in{grid-template-columns:1.05fr 1fr}
  .stage{height:600px}
  .phone{width:260px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}
/* Bengali — the taka sign and বাংলা — from the Bengali font */
.c2::before,.lc b{font-family:var(--serif),"Noto Sans Bengali",sans-serif}
.c2::before{font-family:"Noto Sans Bengali",sans-serif}
@media (max-width:759px){
  .c1{left:7%}.c2{right:5%}
  .hero-cta .btn{flex:1 1 100%}
}