/* =========================================================
   SHARIAH TRADER
   Responsive Landing Page Styles
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

  --bg: #10070b;
  --bg-2: #16090e;
  --bg-3: #1d0b12;

  --red: #ef233c;
  --red-light: #ff5267;
  --red-dark: #bd1730;

  --gold: #f4c95d;

  --white: #ffffff;
  --text: #f8f4f6;

  --muted: #b9abb1;
  --muted-2: #8e8086;

  --border: rgba(255,255,255,0.09);
  --border-red: rgba(239,35,60,0.22);

  --card:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.025)
    );

  --container: 1180px;

  --radius: 22px;

  --shadow:
    0 20px 60px rgba(0,0,0,0.35);

  --shadow-red:
    0 16px 42px rgba(239,35,60,0.24);

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}


body {

  min-height: 100vh;

  margin: 0;

  overflow-x: hidden;

  color: var(--text);

  background:

    radial-gradient(
      circle at 50% -10%,
      rgba(239,35,60,0.18),
      transparent 34%
    ),

    radial-gradient(
      circle at 0% 55%,
      rgba(115,15,35,0.08),
      transparent 30%
    ),

    var(--bg);

  font-family:
    "Poppins",
    "Noto Sans Devanagari",
    sans-serif;

  line-height: 1.6;

}


img {

  display: block;

  max-width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
a {

  -webkit-tap-highlight-color:
    transparent;

}


/* =========================================================
   DEVANAGARI
========================================================= */

.hi {

  font-family:
    "Noto Sans Devanagari",
    "Poppins",
    sans-serif;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.shell {

  width:
    min(
      calc(100% - 32px),
      var(--container)
    );

  margin-inline: auto;

}


/* =========================================================
   GLOBAL LINKS
========================================================= */

.join-link {

  transition:

    transform 0.2s ease,

    box-shadow 0.2s ease,

    background 0.2s ease,

    border-color 0.2s ease;

}


.join-link:focus-visible {

  outline:
    3px solid
    rgba(244,201,93,0.95);

  outline-offset: 4px;

}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {

  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    17px 0;

}


/* BRAND */

.brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}


.brand-pic {

  width: 48px;

  height: 48px;

  flex: 0 0 48px;

  object-fit: cover;

  border-radius: 50%;

  border:
    2px solid
    rgba(239,35,60,0.8);

  box-shadow:

    0 0 0 5px
    rgba(239,35,60,0.04),

    0 0 25px
    rgba(239,35,60,0.2);

}


.brand > span {

  display: flex;

  flex-direction: column;

  min-width: 0;

  line-height: 1.15;

}


.brand strong {

  color: #fff;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 0.01em;

}


.brand small {

  margin-top: 4px;

  color: #bfaeb5;

  font-size: 10px;

  font-weight: 600;

  white-space: nowrap;

}


/* TELEGRAM TOP BUTTON */

.tg-top {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 44px;

  padding:
    9px 17px;

  border:
    1px solid
    rgba(255,255,255,0.10);

  border-radius: 999px;

  background:
    rgba(255,255,255,0.045);

  color: #fff;

  font-size: 12px;

  font-weight: 700;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}


.tg-top:hover {

  background:
    rgba(239,35,60,0.12);

  border-color:
    rgba(239,35,60,0.28);

  transform:
    translateY(-2px);

}


.tg-icon {

  width: 19px;

  height: 19px;

  display: grid;

  place-items: center;

}


.tg-icon svg {

  width: 100%;

  height: 100%;

  fill: #fff;

}


/* =========================================================
   HERO
========================================================= */

.hero {

  position: relative;

  text-align: center;

  padding:

    clamp(55px, 8vw, 105px)

    0

    clamp(65px, 9vw, 110px);

}


/* HERO GLOW */

.hero::before {

  content: "";

  position: absolute;

  z-index: -1;

  width: 520px;

  height: 300px;

  top: 20px;

  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(239,35,60,0.08);

  filter: blur(90px);

  pointer-events: none;

}


/* AVATAR */

.avatar {

  width:
    clamp(86px, 12vw, 116px);

  height:
    clamp(86px, 12vw, 116px);

  margin:
    0 auto 24px;

  padding: 4px;

  border-radius: 50%;

  background:

    linear-gradient(
      135deg,
      #ff6477,
      var(--red),
      #711022
    );

  box-shadow:

    0 0 0 8px
    rgba(239,35,60,0.05),

    0 18px 50px
    rgba(239,35,60,0.22);

}


.avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border:
    4px solid
    #170a0f;

  border-radius: 50%;

}


/* BADGE */

.badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding:
    8px 15px;

  margin-bottom: 21px;

  border:
    1px solid
    rgba(239,35,60,0.25);

  border-radius: 999px;

  background:
    rgba(239,35,60,0.08);

  color: #f3cbd1;

  font-size: 11px;

  font-weight: 700;

}


.dot {

  width: 7px;

  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #43e37a;

  box-shadow:
    0 0 11px
    rgba(67,227,122,0.75);

}


/* HERO TITLE */

.hero h1 {

  max-width: 920px;

  margin:
    0 auto;

  color: #fff;

  font-size:
    clamp(38px, 7vw, 76px);

  line-height: 1.09;

  letter-spacing: -0.035em;

  font-weight: 800;

}


.hero h1 em {

  color: var(--red);

  font-style: normal;

  background:

    linear-gradient(
      90deg,
      #ff5267,
      #ef233c
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color:
    transparent;

}


/* ENGLISH BRAND LINE */

.eng-name {

  margin-top: 19px;

  color: #d2c3c9;

  font-size:
    clamp(10px, 1.5vw, 14px);

  font-weight: 700;

  letter-spacing: 0.13em;

}


/* HERO DESCRIPTION */

.lead {

  max-width: 750px;

  margin:
    27px auto 0;

  color: #d8cdd2;

  font-size:
    clamp(16px, 2vw, 20px);

  line-height: 1.8;

}


.lead-en {

  max-width: 700px;

  margin:
    12px auto 0;

  color: var(--muted);

  font-size:
    clamp(13px, 1.7vw, 16px);

  line-height: 1.75;

}


/* HERO ACTIONS */

.hero-actions {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 13px;

  margin-top: 34px;

}


/* PRIMARY BUTTON */

.primary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  min-height: 56px;

  padding:
    14px 26px;

  border-radius: 14px;

  background:

    linear-gradient(
      135deg,
      #ff304b,
      #c91632
    );

  color: #fff;

  font-family:
    "Noto Sans Devanagari",
    "Poppins",
    sans-serif;

  font-size: 14px;

  font-weight: 800;

  box-shadow:
    var(--shadow-red);

}


.primary span:last-child {

  font-family: "Poppins", sans-serif;

  font-size: 20px;

  line-height: 1;

}


.primary:hover {

  transform:
    translateY(-3px);

  box-shadow:

    0 18px 45px
    rgba(239,35,60,0.35);

}


.free {

  color: #9d8f95;

  font-size: 11px;

  font-weight: 600;

}


/* =========================================================
   METHOD
========================================================= */

.method {

  padding:
    75px 0;

}


/* SECTION TITLE */

.section-title {

  max-width: 720px;

  margin:
    0 auto 42px;

  text-align: center;

}


.section-title > span {

  color:
    var(--red-light);

  font-size: 10px;

  font-weight: 800;

  letter-spacing:
    0.2em;

}


.section-title h2 {

  margin-top: 10px;

  color: #fff;

  font-size:
    clamp(28px, 4vw, 44px);

  line-height: 1.2;

  font-weight: 800;

}


.section-title p {

  margin-top: 13px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;

}


/* =========================================================
   CARDS
========================================================= */

.cards {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;

}


.card {

  position: relative;

  min-height: 245px;

  padding:
    clamp(24px, 3vw, 34px);

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;

}


.card::before {

  content: "";

  position: absolute;

  width: 140px;

  height: 140px;

  right: -75px;

  bottom: -75px;

  border-radius: 50%;

  background:
    rgba(239,35,60,0.10);

  filter: blur(8px);

}


.card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(239,35,60,0.22);

  background:

    linear-gradient(
      145deg,
      rgba(239,35,60,0.06),
      rgba(255,255,255,0.025)
    );

}


.num {

  display: inline-block;

  color:
    #ed6272;

  font-size: 10px;

  font-weight: 800;

  letter-spacing:
    0.18em;

}


.card h3 {

  margin-top: 18px;

  color: #fff;

  font-size:
    clamp(21px, 2.5vw, 27px);

  line-height: 1.35;

  font-weight: 800;

}


.card p {

  margin-top: 13px;

  color: #b5a7ad;

  font-size: 13px;

  line-height: 1.9;

}


/* =========================================================
   JOIN SECTION
========================================================= */

.join {

  position: relative;

  margin:
    50px 0 40px;

  padding:
    clamp(40px, 7vw, 72px)
    clamp(20px, 5vw, 60px);

  text-align: center;

  overflow: hidden;

  border:
    1px solid
    var(--border-red);

  border-radius: 28px;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(239,35,60,0.17),
      transparent 60%
    ),

    rgba(255,255,255,0.025);

}


.join::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      135deg,
      transparent 40%,
      rgba(255,255,255,0.025),
      transparent 60%
    );

}


.join h2 {

  position: relative;

  max-width: 760px;

  margin:
    0 auto;

  color: #fff;

  font-size:
    clamp(28px, 5vw, 48px);

  line-height: 1.3;

  font-weight: 800;

}


.join p {

  position: relative;

  margin:
    15px auto 27px;

  color:
    #bcaeb3;

  font-size: 13px;

}


/* =========================================================
   SHARIAH NOTE
========================================================= */

.shariah-note {

  max-width: 900px;

  margin:
    30px auto 70px;

  padding:
    clamp(25px, 4vw, 38px);

  border:
    1px solid
    rgba(244,201,93,0.16);

  border-radius: 20px;

  background:
    rgba(244,201,93,0.035);

}


.shariah-note h2 {

  color:
    var(--gold);

  font-size:
    clamp(20px, 3vw, 27px);

  line-height: 1.4;

  font-weight: 800;

}


.shariah-note p {

  margin-top: 13px;

  color:
    #c4b7bc;

  font-size: 12px;

  line-height: 1.9;

}


.shariah-note .lead-en {

  margin-top: 12px;

  color:
    #9c8e94;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

  padding:
    38px 0 105px;

  border-top:
    1px solid
    rgba(255,255,255,0.06);

  text-align: center;

  color:
    #80747a;

  font-size: 10px;

  line-height: 1.95;

}


footer b {

  color:
    #b3a5ab;

}


footer a {

  color:
    var(--red-light);

  font-weight: 700;

}


.disclaimer {

  max-width: 720px;

  margin:
    18px auto 0;

  color:
    #73676d;

}


/* =========================================================
   FLOATING TELEGRAM BUTTON
========================================================= */

.float {

  position: fixed;

  z-index: 9999;

  right:
    max(
      18px,
      env(safe-area-inset-right)
    );

  bottom:
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  width: 58px;

  height: 58px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,255,255,0.15);

  border-radius: 50%;

  background:

    linear-gradient(
      135deg,
      #ff304b,
      #bd1730
    );

  box-shadow:

    0 12px 35px
    rgba(0,0,0,0.45),

    0 7px 22px
    rgba(239,35,60,0.30);

}


.float:hover {

  transform:
    translateY(-4px)
    scale(1.03);

}


.float svg {

  width: 27px;

  height: 27px;

  fill: #fff;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {


  .cards {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


  .card:last-child {

    grid-column:
      1 / -1;

  }


  .hero {

    padding-top: 60px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {


  .shell {

    width:
      min(
        calc(100% - 24px),
        var(--container)
      );

  }


  /* NAV */

  .nav {

    min-height: 68px;

    padding:
      12px 0;

  }


  .brand {

    gap: 9px;

  }


  .brand-pic {

    width: 42px;

    height: 42px;

    flex-basis: 42px;

  }


  .brand strong {

    font-size: 14px;

  }


  .brand small {

    font-size: 8px;

  }


  .tg-top {

    min-height: 40px;

    padding:
      8px 12px;

    font-size: 10px;

  }


  .tg-icon {

    width: 17px;

    height: 17px;

  }


  /* HERO */

  .hero {

    padding:
      42px 0 65px;

  }


  .avatar {

    margin-bottom: 20px;

  }


  .badge {

    margin-bottom: 18px;

    padding:
      7px 12px;

    font-size: 9px;

  }


  .hero h1 {

    font-size:
      clamp(
        34px,
        10.5vw,
        52px
      );

    line-height: 1.13;

  }


  .eng-name {

    margin-top: 15px;

    font-size: 8px;

    letter-spacing:
      0.09em;

  }


  .lead {

    margin-top: 21px;

    font-size: 14px;

    line-height: 1.8;

  }


  .lead-en {

    font-size: 11px;

    line-height: 1.75;

  }


  .hero-actions {

    margin-top: 28px;

  }


  .primary {

    width: 100%;

    max-width: 360px;

    min-height: 54px;

    padding:
      13px 18px;

    font-size: 13px;

  }


  .free {

    font-size: 9px;

  }


  /* METHOD */

  .method {

    padding:
      55px 0;

  }


  .section-title {

    margin-bottom: 28px;

  }


  .section-title > span {

    font-size: 8px;

    letter-spacing:
      0.15em;

  }


  .section-title h2 {

    font-size: 29px;

  }


  .section-title p {

    font-size: 12px;

    line-height: 1.8;

  }


  /* CARDS */

  .cards {

    grid-template-columns:
      1fr;

    gap: 13px;

  }


  .card {

    min-height: auto;

    padding: 24px;

  }


  .card:last-child {

    grid-column: auto;

  }


  .card h3 {

    font-size: 21px;

  }


  .card p {

    font-size: 12px;

    line-height: 1.85;

  }


  /* JOIN */

  .join {

    margin:
      30px 0 30px;

    padding:
      38px 20px;

    border-radius: 22px;

  }


  .join h2 {

    font-size: 27px;

  }


  .join p {

    font-size: 11px;

    line-height: 1.75;

  }


  /* SHARIAH */

  .shariah-note {

    margin:
      25px auto 50px;

    padding:
      24px 20px;

  }


  .shariah-note h2 {

    font-size: 19px;

  }


  .shariah-note p {

    font-size: 11px;

    line-height: 1.9;

  }


  /* FOOTER */

  footer {

    padding-bottom: 100px;

    font-size: 9px;

  }


  /* FLOAT */

  .float {

    width: 54px;

    height: 54px;

  }


  .float svg {

    width: 25px;

    height: 25px;

  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {


  .shell {

    width:
      calc(100% - 20px);

  }


  .brand small {

    display: none;

  }


  .tg-top span:last-child {

    display: none;

  }


  .tg-top {

    width: 40px;

    padding: 8px;

  }


  .hero h1 {

    font-size: 33px;

  }


  .eng-name {

    font-size: 7px;

  }


  .primary {

    font-size: 12px;

  }


  .float {

    right: 14px;

    bottom: 14px;

  }

}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media (
  max-height: 520px
) and (
  orientation: landscape
) {

  .hero {

    padding-top: 30px;

    padding-bottom: 45px;

  }


  .avatar {

    width: 70px;

    height: 70px;

    margin-bottom: 15px;

  }


  .hero h1 {

    font-size: 38px;

  }


}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {


  html {

    scroll-behavior:
      auto;

  }


  * {

    animation: none !important;

    transition: none !important;

  }

}