:root{
    --bg:#070f24;          /* deep navy (replaces black) */
    --bg-2:#0c1733;        /* section alt */
    --card:#111f42;        /* cards */
    --line:#1f2f5c;        /* borders */
    --accent:#F0294D;      /* crimson red */
    --accent-2:#FF6B85;    /* lighter crimson */
    --on-accent:#ffffff;   /* text on accent fills */
    --text:#eef2ff;
    --muted:#8d9bc4;
    --radius:14px;
    --f-body:Inter,system-ui,sans-serif;
    --f-display:Anton,Impact,sans-serif;
    --f-hand:Caveat,cursive;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font-family:var(--f-body);line-height:1.6;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{width:min(1200px,92%);margin:0 auto}
  .display{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.5px;line-height:.95}
  .accent{color:var(--accent)}
  .eyebrow{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.6rem}
  .eyebrow::before{content:"";width:28px;height:2px;background:var(--accent)}
  section{padding:110px 0;position:relative}
  #fx{position:fixed;inset:0;pointer-events:none;z-index:50}

  /* ---------- Nav ---------- */
  nav{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
  nav.scrolled{background:rgba(7,15,36,.85);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-color:var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo{font-family:var(--f-display);font-size:1.6rem;letter-spacing:1px}
  .logo span{color:var(--accent)}
  .links{display:flex;gap:2rem;font-size:.9rem;color:var(--muted)}
  .links a:hover{color:var(--text)}
  .btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--on-accent);padding:.8rem 1.4rem;border-radius:999px;font-weight:600;font-size:.9rem;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--accent)}
  .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
  .menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer}

  /* ---------- Hero ---------- */
  .hero{min-height:100vh;display:flex;align-items:center;padding-top:72px;overflow:hidden;
    background:radial-gradient(60% 70% at 70% 45%,rgba(240,41,77,.18),transparent 70%),var(--bg)}
  .hero-grid{display:grid;grid-template-columns:1fr 1.1fr .6fr;align-items:center;gap:2rem;position:relative}
  .big-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-78%);font-size:clamp(5rem,17vw,16rem);
    color:var(--accent);opacity:.95;white-space:nowrap;z-index:0;pointer-events:none}
  .hero-text{position:relative;z-index:2}
  .hello{font-family:var(--f-hand);font-size:2.2rem;color:var(--accent-2)}
  .hero-name{font-size:clamp(3rem,7vw,5.5rem)}
  .role{font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin:.4rem 0 1rem;font-size:.95rem}
  .hero-text p{color:#c3cdea;text-shadow:0 2px 12px var(--bg);max-width:340px;margin-bottom:1.6rem}
  .portrait{position:relative;z-index:1;justify-self:center;width:min(440px,86vw);aspect-ratio:640/707}
  .portrait::before{content:"";position:absolute;left:10%;right:10%;bottom:8%;top:18%;border-radius:50%;
    background:radial-gradient(circle,rgba(240,41,77,.45),transparent 70%);filter:blur(30px);z-index:-1}
  .portrait .initial{font-family:var(--f-display);font-size:9rem;color:rgba(255,255,255,.9)}
  .portrait img{width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .stats{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.6rem}
  .stat b{font-family:var(--f-display);font-size:2.6rem;color:var(--accent);display:block;line-height:1}
  .stat span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
  .scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.3em;color:var(--muted)}

  /* ---------- Work ---------- */
  .sec-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap}
  .sec-title{font-size:clamp(2.4rem,5vw,4rem)}
  .filters{display:flex;gap:.5rem;flex-wrap:wrap}
  .filters button{background:transparent;border:1px solid var(--line);color:var(--muted);padding:.5rem 1rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.85rem}
  .filters button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s,border-color .3s}
  .card:hover{transform:translateY(-6px);border-color:var(--accent)}
  .thumb{aspect-ratio:16/10;display:grid;place-items:center;position:relative;overflow:hidden}
  .thumb .t{font-family:var(--f-display);font-size:2rem;text-transform:uppercase;color:#fff;z-index:1;text-align:center;padding:0 1rem}
  .card .body{padding:1.2rem 1.3rem 1.4rem}
  .card .num{font-family:var(--f-display);color:var(--accent);font-size:1.1rem}
  .card h3{font-size:1.1rem;margin:.2rem 0 .3rem}
  .card p{color:var(--muted);font-size:.88rem}
  .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem}
  .tags span{font-size:.7rem;border:1px solid var(--line);padding:.2rem .6rem;border-radius:999px;color:var(--muted)}
  .card.hide{display:none}

  /* ---------- Tech strip ---------- */
  .tech{padding:50px 0;border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden}
  .marquee{display:flex;gap:3.5rem;width:max-content;animation:scroll 28s linear infinite}
  .marquee span{font-family:var(--f-display);font-size:1.8rem;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .marquee span i{color:var(--accent);font-style:normal;margin-left:3.5rem}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ---------- Process ---------- */
  .process-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:center}
  .process-title{font-size:clamp(3rem,7vw,5.5rem)}
  .steps{display:grid;gap:1rem}
  .step{display:flex;gap:1.2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem}
  .step b{font-family:var(--f-display);font-size:1.8rem;color:var(--accent);min-width:48px}
  .step h4{font-size:1rem}
  .step p{color:var(--muted);font-size:.88rem}

  /* ---------- Skills ---------- */
  .skills{background:var(--bg-2)}
  .skills-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:2rem;align-items:start}
  .skill-list{display:grid;gap:1.1rem}
  .skill .row{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.4rem}
  .bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden}
  .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:6px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
  .callout{background:var(--accent);border-radius:var(--radius);padding:2rem;color:var(--on-accent)}
  .callout p{font-size:1.4rem;font-weight:600;line-height:1.3}
  .callout .sig{font-family:var(--f-hand);font-size:2rem;margin-top:1.2rem}

  /* ---------- Timeline ---------- */
  .timeline{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .tl{border-left:2px solid var(--line);padding-left:1.8rem;display:grid;gap:2rem}
  .tl-item{position:relative}
  .tl-item::before{content:"";position:absolute;left:calc(-1.8rem - 7px);top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(240,41,77,.2)}
  .tl-item small{color:var(--accent);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
  .tl-item h4{font-size:1.05rem;margin:.2rem 0}
  .tl-item p{color:var(--muted);font-size:.88rem}
  .shipped{font-size:clamp(3rem,7vw,5.5rem);position:sticky;top:120px}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
  .contact-title{font-size:clamp(3rem,7vw,5.5rem)}
  .c-list{display:grid;gap:.9rem;margin-top:2rem}
  .c-list a{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s}
  .c-list a:hover{border-color:var(--accent)}
  .c-list .ic{width:38px;height:38px;border-radius:10px;background:rgba(240,41,77,.15);color:var(--accent);display:grid;place-items:center;font-weight:700}
  .c-list small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
  form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;display:grid;gap:1rem;align-self:start}
  label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
  input,textarea,select{width:100%;margin-top:.4rem;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:.85rem 1rem;font:inherit}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
  textarea{min-height:120px;resize:vertical}
  footer{border-top:1px solid var(--line);padding:2rem 0;color:var(--muted);font-size:.85rem}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

  /* ---------- Design-tool overlay: cursors + selection boxes ---------- */
  .mc{position:fixed;top:0;left:0;z-index:46;pointer-events:none;will-change:transform;display:flex;align-items:flex-start}
  .mc svg{width:18px;height:18px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
  .mc.sm svg{width:13px;height:13px;opacity:.85}
  .mc b{margin:14px 0 0 -2px;font:600 11px Inter,sans-serif;color:#fff;padding:2px 7px;border-radius:5px;white-space:nowrap}
  .sel{position:absolute;top:0;left:0;border:1.5px solid #4c8dff;pointer-events:none;z-index:45;opacity:0;transition:opacity .3s}
  .sel.show{opacity:1}
  .sel i{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #4c8dff;transform:translate(-50%,-50%)}
  .sel .tag{position:absolute;top:-22px;left:-1px;font:500 11px Inter,sans-serif;color:#4c8dff;white-space:nowrap}
  .sel .dim{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);background:#4c8dff;color:#fff;font:600 11px Inter,sans-serif;padding:2px 7px;border-radius:4px;white-space:nowrap}

  /* ---------- Reveal ---------- */
  .rv{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .links{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line)}
    .links.open{display:flex}
    .links a{padding:1rem 4%}
    .menu-btn{display:block}
    nav .btn{display:none}
    .projects{grid-template-columns:1fr 1fr}
    .process-grid,.skills-grid,.timeline,.contact-grid{grid-template-columns:1fr}
    .shipped{position:static}
  }
  @media (max-width:600px){
    section{padding:80px 0}
    .projects{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .rv{opacity:1;transform:none}
  }

/* =====================================================================
   Inner pages: services, projects, case studies
   ===================================================================== */
a.card{display:block;color:inherit}
.card .more{display:inline-block;margin-top:.9rem;font-size:.82rem;font-weight:600;color:var(--accent)}
.thumb img{width:100%;height:100%;object-fit:cover}
.step.svc{position:relative;transition:border-color .2s,transform .2s}
.step.svc:hover{border-color:var(--accent);transform:translateX(4px)}
.step.svc .go{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);color:var(--accent);font-style:normal;font-weight:700}

.page-hero{padding:150px 0 70px;background:radial-gradient(50% 60% at 80% 20%,rgba(240,41,77,.12),transparent 70%),var(--bg)}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:1.6rem;display:flex;gap:.6rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal;opacity:.5}
.page-title{font-size:clamp(3rem,9vw,7.5rem);margin:.6rem 0 1.2rem}
.lead{font-size:1.15rem;color:#c3cdea;max-width:640px}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}
.chips span{border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;color:var(--muted);background:var(--card)}

.meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2.2rem 0;border-block:1px solid var(--line);padding:1.3rem 0}
.meta-grid small{display:block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.meta-grid span{font-weight:600;font-size:.95rem}
.meta-grid a{color:var(--accent)}
.cover{border-radius:20px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.cover img{width:100%;height:100%;object-fit:cover}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:border-color .3s}
.feature:hover{border-color:var(--accent)}
.f-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(240,41,77,.12);color:var(--accent);font-size:1.2rem;margin-bottom:1rem}
.feature h3{font-size:1.1rem;margin-bottom:.6rem}
.feature p,.feature li{color:var(--muted);font-size:.9rem}
.feature ul{list-style:none;display:grid;gap:.45rem}
.feature li::before{content:"→ ";color:var(--accent)}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.big-p{font-size:1.25rem;line-height:1.55;margin-top:1rem}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;grid-auto-flow:dense;gap:1rem}
.g-item{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);margin:0}
.g-item.wide{grid-column:span 2}
.g-item.tall{grid-row:span 2}
.g-item[data-lb]{cursor:zoom-in}
.g-item img,.g-item video{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.g-item[data-lb]:hover img,.g-item[data-lb]:hover video{transform:scale(1.04)}
.g-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .8rem;font-size:.85rem;font-weight:600;
  background:linear-gradient(transparent,rgba(7,15,36,.92));pointer-events:none}
.g-item.hide{display:none}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:1.2rem;pointer-events:none}

/* Wireframe placeholder (until a real image is added) */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1rem;
  border:1.5px dashed rgba(240,41,77,.45);border-radius:inherit;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(240,41,77,.04) 14px 15px),var(--card)}
.cover .ph{position:relative;height:100%}
.ph-k{font:600 .75rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ph small{color:var(--muted);font-size:.8rem}

/* Before / after */
.ba{position:absolute;inset:0;--pos:50%}
.ba img{position:absolute;inset:0}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--accent);pointer-events:none}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-l,.ba-r{position:absolute;top:.8rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(7,15,36,.75);padding:.25rem .6rem;border-radius:6px;pointer-events:none}
.ba-l{left:.8rem}.ba-r{right:.8rem}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.metric b{font-family:var(--f-display);font-size:3rem;line-height:1;color:var(--accent);display:block;margin-bottom:.5rem}
.metric span{color:var(--muted);font-size:.85rem}
.metric small{display:block;margin-top:.4rem;font-size:.7rem;color:var(--muted);opacity:.7;letter-spacing:.1em;text-transform:uppercase}
.metric.empty{border-style:dashed}

/* Prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.pager a{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:border-color .2s}
.pager a:hover{border-color:var(--accent)}
.pager a:last-child{text-align:right}
.pager small{display:block;color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.pager span{font-size:1.6rem}

.cta-band{background:var(--bg-2);border-top:1px solid var(--line);text-align:center}
.cta-band .eyebrow{justify-content:center}
.cta-band .hero-actions{justify-content:center}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(4,9,24,.94);display:none;align-items:center;justify-content:center;padding:4rem 4.5rem}
.lb.open{display:flex}
.lb-c{max-width:100%;max-height:100%;display:flex}
.lb-c img,.lb-c video{max-width:100%;max-height:calc(100vh - 8rem);border-radius:10px;object-fit:contain}
.lb-c iframe{width:min(1100px,90vw);aspect-ratio:16/9;border:0;border-radius:10px}
.lb button{position:absolute;background:var(--card);color:var(--text);border:1px solid var(--line);width:46px;height:46px;border-radius:50%;font-size:1.5rem;cursor:pointer}
.lb button:hover{border-color:var(--accent);color:var(--accent)}
.lb-x{top:1rem;right:1rem}.lb-p{left:1rem;top:50%}.lb-n{right:1rem;top:50%}
.lb-t{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:var(--muted);font-size:.9rem}

@media (max-width:960px){
  .meta-grid{grid-template-columns:1fr 1fr}
  .cols2{grid-template-columns:1fr;gap:2rem}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
}
@media (max-width:600px){
  .page-hero{padding:120px 0 50px}
  .gallery{grid-template-columns:1fr;grid-auto-rows:240px}
  .g-item.wide{grid-column:auto}
  .pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left}
  .lb{padding:3.5rem .8rem}
  .lb-p,.lb-n{top:auto;bottom:1rem}
}

/* =====================================================================
   Language switcher + multi-language (Arabic RTL, Bengali)
   ===================================================================== */
.nav-end{display:flex;align-items:center;gap:.7rem}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1px solid var(--line);color:var(--text);
  padding:.55rem .85rem;border-radius:999px;font:600 .8rem Inter,sans-serif;cursor:pointer;transition:border-color .2s}
.lang-btn:hover,.lang.open .lang-btn{border-color:var(--accent)}
.lang-btn .caret{font-size:.7rem;transition:transform .2s}
.lang.open .caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + .5rem);inset-inline-end:0;min-width:150px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:.4rem;display:none;flex-direction:column;box-shadow:0 20px 40px -10px rgba(0,0,0,.6);z-index:60}
.lang.open .lang-menu{display:flex}
.lang-menu a{padding:.6rem .8rem;border-radius:8px;font-size:.9rem;color:var(--muted);text-align:start}
.lang-menu a:hover{background:rgba(240,41,77,.12);color:var(--text)}
.lang-menu a.on{color:var(--accent);font-weight:600}
.lang-menu a[lang=ar]{font-family:Cairo,Inter,sans-serif}
.lang-menu a[lang=bn]{font-family:'Hind Siliguri',Inter,sans-serif}

/* Fonts per language: Latin glyphs keep Anton/Inter, other scripts fall through */
html[lang=ar]{--f-body:Inter,Cairo,system-ui,sans-serif;--f-display:Anton,Cairo,sans-serif;--f-hand:Caveat,Cairo,cursive}
html[lang=bn]{--f-body:Inter,'Hind Siliguri',system-ui,sans-serif;--f-display:Anton,'Hind Siliguri',sans-serif;--f-hand:Caveat,'Hind Siliguri',cursive}
html[lang=ar] .display{line-height:1.25;font-weight:900}
html[lang=bn] .display{line-height:1.3}
html[lang=ar] .hero-name,html[lang=bn] .hero-name{line-height:.95}
html[lang=ar] .hello,html[lang=bn] .hello{font-size:1.6rem;font-weight:700}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] .page-title,html[lang=bn] .page-title{font-size:clamp(2.6rem,7.5vw,6rem)}
html[lang=ar] body,html[lang=bn] body{line-height:1.75}

/* Pieces that must stay left-to-right in every language */
.tech,.big-word,.mc,.sel,.lb,.ba{direction:ltr}

/* RTL layout */
[dir=rtl] .tl{border-left:0;padding-left:0;border-right:2px solid var(--line);padding-right:1.8rem}
[dir=rtl] .tl-item::before{left:auto;right:calc(-1.8rem - 7px)}
[dir=rtl] .step.svc .go{right:auto;left:1.2rem}
[dir=rtl] .step.svc:hover{transform:translateX(-4px)}
[dir=rtl] .feature li::before{content:"← "}
[dir=rtl] .pager a:last-child{text-align:left}
[dir=rtl] .stat b{direction:ltr;text-align:right}
[dir=rtl] .hero{background:radial-gradient(60% 70% at 30% 45%,rgba(240,41,77,.18),transparent 70%),var(--bg)}
@media (max-width:960px){
  [dir=rtl] .stat b{text-align:center}
  .nav-end{gap:.4rem}
}
@media (max-width:600px){
  [dir=rtl] .pager a:last-child{text-align:right}
}
.display{overflow-wrap:break-word}
@media (max-width:600px){
  .contact-title,.page-title,.process-title,.shipped{font-size:clamp(2.2rem,10.5vw,3rem)}
  html[lang=ar] .page-title,html[lang=bn] .page-title{font-size:clamp(2.1rem,9.5vw,3rem)}
}
/* Numbers like "6+" keep their order in RTL */
[dir=rtl] .stat b,[dir=rtl] .metric b{direction:ltr;text-align:right}
@media (max-width:960px){[dir=rtl] .stat b{text-align:center}}

/* Slow background colour shift (colours are set by the small script in <head>) */
@property --bg{syntax:"<color>";inherits:true;initial-value:#070f24}
@property --bg-2{syntax:"<color>";inherits:true;initial-value:#0c1733}
@property --card{syntax:"<color>";inherits:true;initial-value:#111f42}
@property --line{syntax:"<color>";inherits:true;initial-value:#1f2f5c}
html.bg-anim{transition:--bg 5s linear,--bg-2 5s linear,--card 5s linear,--line 5s linear}
/* Hero text that sits on top of the big accent word: white with a soft shadow so it never blends in */
.hero .hello{color:#ffe1e6;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hero .role,.hero .stat b{color:var(--text);text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hero .stat span{color:#dfe5f7;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* Phones and tablets: the hero keeps the desktop composition (text | portrait | stats over the big word), scaled down */
@media (max-width:960px){
  .hero{min-height:auto;padding:104px 0 44px}
  .hero-grid{grid-template-columns:1.05fr 1.1fr .6fr;gap:.5rem;text-align:start;padding:0;align-items:center}
  .big-word{top:50%;font-size:17.5vw;transform:translate(-50%,-70%)}
  .hello{font-size:clamp(1.05rem,4.6vw,2.2rem)}
  .hero-name{font-size:clamp(1.8rem,8.4vw,5rem)}
  html[lang=ar] .hero-name,html[lang=bn] .hero-name{font-size:clamp(1.35rem,6.2vw,4rem)}
  html[lang=ar] .hello,html[lang=bn] .hello{font-size:clamp(.85rem,3.4vw,1.6rem)}
  .hero .role{font-size:clamp(.5rem,1.9vw,.95rem);letter-spacing:.06em;margin:.3rem 0 .55rem}
  .hero-text p{font-size:clamp(.66rem,2.35vw,1rem);line-height:1.45;margin:0 0 .85rem;max-width:none}
  .hero .hero-text .btn{padding:.5rem .85rem;font-size:clamp(.66rem,2.3vw,.9rem);white-space:nowrap}
  .portrait{width:118%;margin-inline:-9%}
  .stats{flex-direction:column;justify-content:flex-start;gap:clamp(.55rem,3vw,1.6rem)}
  .stat b{font-size:clamp(1.25rem,5.6vw,2.6rem)}
  .hero .stat span{display:block;font-size:clamp(.5rem,1.65vw,.8rem);letter-spacing:.04em;line-height:1.25}
  [dir=rtl] .stat b{text-align:right}
  .scroll-hint{bottom:16px}
}

/* Live demo in a phone frame */
.demo-sec{background:var(--bg-2);border-block:1px solid var(--line)}
.demo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.chip-soon{display:inline-block;border:1px dashed var(--accent);color:var(--accent);border-radius:999px;padding:.7rem 1.2rem;font-weight:600;font-size:.9rem}
.demo-tools{display:flex;gap:1.2rem;margin-top:1.2rem;font-size:.9rem}
.demo-tools[hidden]{display:none}
.demo-tools button,.demo-tools a{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.phone{justify-self:center;width:min(320px,80vw);direction:ltr}
.phone-frame{position:relative;aspect-ratio:9/19;border-radius:42px;padding:12px;background:#05070d;border:2px solid var(--line);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.phone-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:76px;height:8px;border-radius:8px;background:#05070d;z-index:2;opacity:.9}
.phone-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--card)}
.phone-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.phone-poster{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:0;color:var(--text);font:600 1rem var(--f-body,Inter),sans-serif;cursor:pointer;text-align:center;padding:1.2rem;
  background:radial-gradient(70% 50% at 50% 40%,rgba(240,41,77,.28),transparent 70%),var(--card)}
.phone-poster[hidden]{display:none}
.phone-poster .play{position:static;transform:none}
.phone-poster.soon{cursor:default}
.phone-poster.soon span{font-family:var(--f-display);font-size:1.5rem;text-transform:uppercase;line-height:1.05}
.phone-poster.soon small{color:var(--muted);font-weight:500;font-size:.8rem;border:1px dashed var(--line);border-radius:999px;padding:.35rem .8rem}
@media (max-width:960px){.demo-grid{grid-template-columns:1fr;gap:2rem}}