/* =========================================================
   HALAL PREMIUM GLOBAL THEME
   LUXURY • CLEAN • MODERN • NATIONAL
========================================================= */

:root{

  /* ======================================================
     COLOR SYSTEM
  ====================================================== */

  --primary:#081120;
  --primary-soft:#132238;

  --accent:#22c55e;
  --accent-2:#16a34a;

  --gold:#d4af37;
  --gold-soft:#f5d97a;

  --bg-main:#020617;
  --bg-surface:#08111f;
  --bg-surface-2:#0f172a;

  --glass:
    rgba(255,255,255,.04);

  --glass-strong:
    rgba(255,255,255,.07);

  --bg-card:
    linear-gradient(
      180deg,
      rgba(15,23,42,.88),
      rgba(7,12,24,.97)
    );

  /* ======================================================
     TEXT
  ====================================================== */

  --text-main:#f8fafc;
  --text-soft:#94a3b8;
  --text-muted:#64748b;

  /* ======================================================
     BORDER
  ====================================================== */

  --border:
    rgba(255,255,255,.06);

  --border-strong:
    rgba(255,255,255,.12);

  --border-accent:
    rgba(34,197,94,.22);

  /* ======================================================
     RADIUS
  ====================================================== */

  --radius-xs:10px;
  --radius-sm:16px;
  --radius-md:22px;
  --radius-lg:32px;
  --radius-xl:42px;

  /* ======================================================
     SHADOW
  ====================================================== */

  --shadow-soft:
    0 8px 24px rgba(0,0,0,.18);

  --shadow-main:
    0 24px 70px rgba(0,0,0,.42);

  --shadow-heavy:
    0 40px 100px rgba(0,0,0,.55);

  --shadow-accent:
    0 18px 40px rgba(34,197,94,.14);

  --shadow-gold:
    0 16px 34px rgba(212,175,55,.12);

  /* ======================================================
     TYPOGRAPHY
  ====================================================== */

  --font-main:
    'Plus Jakarta Sans',
    system-ui,
    sans-serif;

  /* ======================================================
     LAYOUT
  ====================================================== */

  --max-width:1320px;

  /* ======================================================
     TRANSITION
  ====================================================== */

  --transition:.32s cubic-bezier(.4,0,.2,1);
}

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

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

/* =========================================================
   BODY
========================================================= */

body{

  font-family:var(--font-main);

  color:var(--text-main);

  line-height:1.75;

  min-height:100vh;

  overflow-x:hidden;

  position:relative;

  background:

    radial-gradient(
      circle at top left,
      rgba(34,197,94,.14),
      transparent 30%
    ),

    radial-gradient(
      circle at top right,
      rgba(212,175,55,.09),
      transparent 26%
    ),

    linear-gradient(
      180deg,
      #020617 0%,
      #07111d 40%,
      #020617 100%
    );

  background-attachment:fixed;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  text-rendering:optimizeLegibility;
}

/* =========================================================
   PREMIUM GLOW
========================================================= */

body::before{

  content:'';

  position:fixed;

  width:560px;
  height:560px;

  top:-220px;
  left:-180px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(34,197,94,.13),
      transparent 72%
    );

  filter:blur(95px);

  pointer-events:none;

  z-index:-2;
}

body::after{

  content:'';

  position:fixed;

  width:560px;
  height:560px;

  top:-260px;
  right:-180px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(212,175,55,.10),
      transparent 72%
    );

  filter:blur(105px);

  pointer-events:none;

  z-index:-2;
}

/* =========================================================
   GLOBAL SELECTION
========================================================= */

::selection{
  background:rgba(34,197,94,.22);
  color:#ffffff;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#030712;
}

::-webkit-scrollbar-thumb{

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #22c55e,
      #16a34a
    );
}

/* =========================================================
   GLOBAL ELEMENT
========================================================= */

img{

  display:block;

  max-width:100%;

  object-fit:cover;

  border-radius:var(--radius-md);
}

a{

  text-decoration:none;

  color:inherit;

  transition:var(--transition);
}

button,
input,
textarea,
select{

  font:inherit;

  border:none;
  outline:none;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,h2,h3,h4,h5,h6{

  line-height:1.08;

  letter-spacing:-.04em;

  font-weight:900;

  color:var(--text-main);
}

h1{
  font-size:clamp(42px,7vw,88px);
}

h2{
  font-size:clamp(34px,5vw,64px);
}

h3{
  font-size:clamp(24px,3vw,34px);
}

p{

  color:var(--text-soft);

  font-size:15.5px;

  line-height:1.9;
}

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

.container{

  width:min(100%, var(--max-width));

  margin-inline:auto;

  padding-inline:22px;
}

/* =========================================================
   GLASS EFFECT
========================================================= */

.glass{

  position:relative;

  overflow:hidden;

  background:var(--bg-card);

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

  backdrop-filter:
    blur(20px);

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

  transition:var(--transition);
}

/* LIGHT EFFECT */

.glass::before{

  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      transparent 28%
    );

  pointer-events:none;
}

/* HOVER */

.glass:hover{

  border-color:
    var(--border-accent);

  box-shadow:
    var(--shadow-heavy);
}

/* =========================================================
   PREMIUM BUTTON
========================================================= */

.btn-premium{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  padding:
    14px 24px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #22c55e,
      #16a34a
    );

  color:#ffffff;

  font-weight:800;

  letter-spacing:.2px;

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

  transition:var(--transition);
}

.btn-premium:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 24px 50px rgba(34,197,94,.24);
}

/* =========================================================
   GOLD BUTTON
========================================================= */

.btn-gold{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  padding:
    14px 24px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #d4af37,
      #f5d97a
    );

  color:#102c23;

  font-weight:800;

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

  transition:var(--transition);
}

.btn-gold:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 24px 50px rgba(212,175,55,.20);
}

/* =========================================================
   SECTION SPACING
========================================================= */

.section{

  position:relative;

  padding:
    clamp(90px,10vw,140px)
    0;
}

/* =========================================================
   BADGE
========================================================= */

.badge-halal{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:
    10px 18px;

  border-radius:999px;

  background:
    rgba(34,197,94,.10);

  border:
    1px solid rgba(34,197,94,.18);

  color:#4ade80;

  font-size:12px;
  font-weight:800;

  letter-spacing:.9px;

  text-transform:uppercase;

  backdrop-filter:blur(10px);
}

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

@media(max-width:768px){

  body{
    line-height:1.7;
  }

  .container{
    padding-inline:16px;
  }

  .section{
    padding:70px 0;
  }

  p{
    font-size:14px;
  }

  .glass{
    border-radius:24px;
  }

  .btn-premium,
  .btn-gold{

    width:100%;
  }
}