/*
 * 9.1-F — the home page's depth layer.
 *
 * WHAT THIS IS. The owner asked for a "future generation" feel with 3D in it,
 * and chose the lightweight route (RULES 23, proposal accepted 2026-09-20):
 * CSS transforms and inline SVG, no three.js, no WebGL, no animation library.
 * Nothing here downloads anything; the whole file is a few kilobytes and it
 * cannot slow a phone down the way a 3D engine would.
 *
 * HOW THE DEPTH IS MADE. Four honest tricks, no pictures needed:
 *   1. layered shadows  — a tight dark shadow plus a wide coloured one reads
 *                         as a solid object above a surface;
 *   2. an inner highlight — a 1px light line along the top edge is what makes
 *                         glass look like glass;
 *   3. perspective tilt — the parent holds `perspective`, the child rotates,
 *                         so a card leans toward the reader instead of just
 *                         growing;
 *   4. stacked planes   — two or three absolutely-placed layers at different
 *                         translateZ, which is how the device mock-ups get
 *                         their thickness.
 *
 * RULES THIS FILE KEEPS.
 *   · 22 — everything is fluid; nothing has a fixed pixel width that could
 *     overflow a 320px phone.
 *   · 23 — the palette is the page's own (--p, --p2, --ink…), not a new one.
 *   · 24 — logical properties throughout (inline-start, not left), so Arabic
 *     and Urdu mirror correctly and Bengali's taller line-height still fits.
 *   · 26 — every lift also has a :focus-visible state, so a keyboard sees
 *     exactly what a mouse sees, and motion is dropped for anyone who asked
 *     their system for less of it.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --d-lift: 0 26px 50px -24px rgba(79, 70, 229, .45);
  --d-rest: 0 2px 6px -2px rgba(15, 23, 42, .10), 0 12px 28px -18px rgba(15, 23, 42, .18);
  --d-glass: rgba(255, 255, 255, .08);
  --d-edge: rgba(255, 255, 255, .22);
  --d-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------- a section band */

/*
 * Sections alternate light and deep so the page has a rhythm rather than one
 * endless white scroll. The deep band carries its own aurora: three very soft
 * radial gradients, which cost nothing and never tile visibly.
 */
.band {
  position: relative;
  overflow: hidden;
  padding: 68px 0;
}

.band.deep {
  background: linear-gradient(165deg, #0b1020, #1e1b4b 58%, #2e1065);
  color: #fff;
}

.band.deep::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(129, 140, 248, .30), transparent 70%),
    radial-gradient(34% 34% at 82% 18%, rgba(192, 132, 252, .26), transparent 70%),
    radial-gradient(42% 42% at 50% 96%, rgba(56, 189, 248, .18), transparent 70%);
  pointer-events: none;
}

.band.soft { background: linear-gradient(180deg, #fff, var(--sur2)); }

.band > .wrap { position: relative; z-index: 1; }

.band h2 {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}

.band .lead {
  text-align: center;
  font-size: 15px;
  margin: 0 auto 38px;
  max-width: 620px;
  color: var(--ink2);
}

.band.deep .lead { color: #c7d2fe; }

/* --------------------------------------------------- the free/paid mark */

/*
 * The owner's whole point: a reader must see AT A GLANCE what costs nothing.
 * So "free" is not a word buried in a sentence — it is a mark on the tile,
 * and it is the only green thing on the page.
 */
.tagFree,
.tagPlan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.tagFree { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.tagPlan { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }

.band.deep .tagFree { background: rgba(134, 239, 172, .18); color: #bbf7d0; border-color: rgba(134, 239, 172, .45); }
.band.deep .tagPlan { background: rgba(199, 210, 254, .16); color: #ddd6fe; border-color: rgba(199, 210, 254, .40); }

/* ------------------------------------------------------------ the tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  perspective: 1200px;          /* the depth every child tilts inside */
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--d-rest);
  transform-style: preserve-3d;
  transition: transform .45s var(--d-ease), box-shadow .45s var(--d-ease), border-color .45s var(--d-ease);
}

.band.deep .tile {
  background: var(--d-glass);
  border-color: var(--d-edge);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .35), 0 18px 40px -22px rgba(0, 0, 0, .7);
}

/* the 1px highlight that makes a surface read as glass rather than paint */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding-top: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}

.band.deep .tile::after { background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 40%); }

.tile:hover,
.tile:focus-within {
  transform: translateY(-6px) rotateX(3.2deg) rotateY(-2deg);
  box-shadow: var(--d-lift);
  border-color: rgba(124, 58, 237, .45);
}

.tile .ic {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  background: linear-gradient(135deg, var(--p), var(--p2));
  box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .85), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform: translateZ(26px);   /* the icon floats above its own card */
}

.tile h3 {
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.4;
  transform: translateZ(14px);
}

.tile p {
  font-size: 13.5px;
  color: var(--ink2);
  margin: 0;
  transform: translateZ(8px);
}

.band.deep .tile p { color: #c7d2fe; }

.tile .tagRow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }

/* -------------------------------------------------- isometric mock-ups */

/*
 * A phone and a laptop drawn with elements, not images: a body, a screen and
 * a soft pool of light underneath. They sit inside .stage, which supplies the
 * perspective, and they drift a few pixels so the page feels alive without
 * anything spinning.
 */
.stage {
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.iso {
  position: relative;
  transform: rotateX(12deg) rotateY(-16deg) rotateZ(2deg);
  transform-style: preserve-3d;
  animation: drift 7s var(--d-ease) infinite alternate;
}

@keyframes drift {
  from { transform: rotateX(12deg) rotateY(-16deg) translateY(-5px); }
  to   { transform: rotateX(9deg)  rotateY(-10deg) translateY(6px); }
}

.iso .phone {
  width: 178px;
  height: 340px;
  border-radius: 30px;
  background: linear-gradient(150deg, #1e1b4b, #0b1020);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 40px 70px -30px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iso .notch {
  width: 58px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  margin: 2px auto 6px;
}

/* the little chat lines inside the screen */
.iso .ln {
  height: 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.iso .ln.me {
  background: linear-gradient(135deg, var(--p), var(--p2));
  margin-inline-start: auto;
}

.iso .ln.w70 { width: 70%; }
.iso .ln.w55 { width: 55%; }
.iso .ln.w85 { width: 85%; }
.iso .ln.w45 { width: 45%; }

.iso .glow {
  position: absolute;
  inset-inline: -18%;
  bottom: -34px;
  height: 58px;
  background: radial-gradient(50% 100% at 50% 0, rgba(124, 58, 237, .55), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

/* ------------------------------------------------------ the two doorways */

/*
 * The hero's two choices. Not a tab strip — two real cards, because they lead
 * to two different products and the reader should feel that. The free one is
 * deliberately the brighter of the pair (owner: "ফ্রি গুলো একটু বেশি হাইলাইট").
 */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  perspective: 1200px;
}

@media (max-width: 720px) { .doors { grid-template-columns: 1fr; } }

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 20px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--d-edge);
  background: var(--d-glass);
  backdrop-filter: blur(10px);
  transition: transform .4s var(--d-ease), box-shadow .4s var(--d-ease), border-color .4s var(--d-ease);
  transform-style: preserve-3d;
}

.door:hover,
.door:focus-visible {
  transform: translateY(-5px) rotateX(2.5deg);
  box-shadow: var(--d-lift);
  border-color: rgba(167, 139, 250, .7);
  outline: none;
}

.door.lead {
  background: linear-gradient(140deg, rgba(129, 140, 248, .26), rgba(192, 132, 252, .16));
  border-color: rgba(167, 139, 250, .55);
}

.door .dTop { display: flex; align-items: center; gap: 10px; }

.door .dIc {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  transform: translateZ(20px);
}

.door .dName { font-size: 16px; font-weight: 800; }
/*
 * 9.1-G — `.hero .door p`, not just `.door p`. The landing page's own
 * `.hero p` (16px, 26px below) has the same weight and loads later, so it
 * had been winning: each door's text was a size too big with a 26px strip
 * of empty card under it — the "gap" the owner pointed at. One more class
 * in the selector is enough to let the door keep its own type.
 */
.door p,
.hero .door p { font-size: 13.5px; color: #c7d2fe; margin: 0; max-width: none; }

.door .dGo {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: #ddd6fe;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* the arrow points the reader's way, so it must flip in Arabic and Urdu */
.door .dGo::after { content: "→"; transition: transform .3s var(--d-ease); }
[dir="rtl"] .door .dGo::after { content: "←"; }
.door:hover .dGo::after { transform: translateX(4px); }
[dir="rtl"] .door:hover .dGo::after { transform: translateX(-4px); }

/*
 * 9.1-F — a door the owner has shut.
 *
 * It is not hidden and not removed: the reader should see that opening a shop
 * exists and is simply not available this minute, with the reason in their own
 * language. It stops lifting and stops inviting the cursor, which is how a
 * door says "not now" without a word.
 */
.door.shut {
  opacity: .62;
  cursor: default;
  border-style: dashed;
}

.door.shut:hover,
.door.shut:focus-visible { transform: none; box-shadow: none; border-color: var(--d-edge); }
.door.shut .dGo::after { content: ""; }
.door.shut .dIc { filter: grayscale(1); }

/* ------------------------------------------------------------ a service row */

/*
 * Down the page each service gets a row of its own: words on one side, a
 * drawn illustration on the other, and the sides swap every other row so the
 * eye keeps moving. On a phone they simply stack, picture last.
 */
.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 26px 0;
}

.svc:nth-child(even) .svcArt { order: -1; }

@media (max-width: 820px) {
  .svc { grid-template-columns: 1fr; gap: 22px; }
  .svc:nth-child(even) .svcArt { order: 0; }
}

.svc h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; line-height: 1.35; }
.svc p { font-size: 14.5px; color: var(--ink2); }
.band.deep .svc p { color: #c7d2fe; }
.svc .tagRow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }

.svc ul { list-style: none; margin: 14px 0 0; padding: 0; }
.svc li { font-size: 13.5px; color: var(--ink2); padding: 4px 0 4px 24px; position: relative; }
.band.deep .svc li { color: #c7d2fe; }
.svc li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: #16a34a;
  font-weight: 800;
}
.band.deep .svc li::before { color: #4ade80; }
[dir="rtl"] .svc li { padding: 4px 24px 4px 0; }

/* ------------------------------------------------------------- motion off */

/*
 * RULES 26. Someone who has asked their computer for less movement gets a
 * page that still has depth — shadows and layers stay — but nothing drifts,
 * tilts or slides. The information is identical either way.
 */
@media (prefers-reduced-motion: reduce) {
  .iso { animation: none; }
  .tile, .door, .door .dGo::after { transition: none; }
  .tile:hover, .tile:focus-within, .door:hover, .door:focus-visible { transform: none; }
}

/* A keyboard must see the same thing a mouse sees. */
.door:focus-visible,
.tile a:focus-visible,
.band a:focus-visible {
  outline: 3px solid #a78bfa;
  outline-offset: 3px;
  border-radius: 12px;
}