/* Base Reset & Fonts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
    background-color: #f9fafb;
    color: #1f2937;
}

/* Brand Colors */
:root {
    --primary-red: #D90429;
    --primary-red-hover: #b80322;
    --dark-bg: #111827;
}

/* Utility Classes */
.bg-red-brand { background-color: var(--primary-red); }
.text-red-brand { color: var(--primary-red); }
.border-red-brand { border-color: var(--primary-red); }

/* Header Styling */
.header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(to right, #450a0a, #7f1d1d, #991b1b);
    color: #ffffff;
    padding: 56px 16px;
}

/* Pricing Card Styling */
.plan-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.plan-card.popular {
    border: 2px solid var(--primary-red);
    position: relative;
}

.popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-red);
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 9999px;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-red);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-red-hover);
}

.btn-outline {
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-outline:hover {
    background-color: var(--primary-red);
    color: #ffffff;
}


/* ============ HOSTMAFIYA HOME PAGE STYLES ============ */

.bg-red-brand { background-color: #D90429; }
.text-red-brand { color: #D90429; }
.border-red-brand { border-color: #D90429; }

.gauge-container { position: relative; width: 200px; height: 100px; margin: 0 auto; }
.gauge-body {
    width: 100%; height: 100%;
    border-top-left-radius: 100px; border-top-right-radius: 100px;
    background: linear-gradient(90deg, #ff4d4d 0%, #d90429 100%);
    position: relative; overflow: hidden;
}
.gauge-inner {
    position: absolute; bottom: 0; left: 20px; right: 20px; height: 80px;
    background: #ffffff;
    border-top-left-radius: 80px; border-top-right-radius: 80px;
}
.gauge-needle {
    position: absolute; bottom: 0; left: 50%; width: 4px; height: 75px;
    background: #d90429; transform-origin: bottom center;
    transform: rotate(45deg); border-radius: 2px;
}
.gauge-center-dot {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; background: #d90429;
    border-radius: 50%; border: 3px solid #fff;
}

/* HOSTMAFIYA FINAL POLISH LAYER */
:root{
  --hm-red:#e40025; --hm-red-dark:#980015; --hm-red-deep:#68000d;
  --hm-ink:#0d1b2a; --hm-muted:#667085; --hm-bg:#f7f8fa; --hm-line:#e7e9ee; --hm-soft:#fff1f3;
}
html{scroll-behavior:smooth}
body{background:#f7f8fa!important;color:var(--hm-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
    body > section{box-sizing:border-box}

    /* HERO */
    section.bg-gradient-to-r.from-\[\#5B020B\] {
      background:
        radial-gradient(circle at 76% 28%,rgba(255,65,65,.35),transparent 28%),
        radial-gradient(circle at 18% 55%,rgba(255,255,255,.06),transparent 24%),
        linear-gradient(115deg,#65000b 0%,#a50017 52%,#e40025 100%) !important;
      padding-top:58px!important; padding-bottom:30px!important;
    }
    section.bg-gradient-to-r.from-\[\#5B020B\] .max-w-7xl{max-width:1180px!important}
    section.bg-gradient-to-r.from-\[\#5B020B\] h2{font-size:clamp(38px,4.2vw,60px)!important;line-height:.98!important;letter-spacing:-.035em!important;text-shadow:0 2px 12px rgba(0,0,0,.15)}
    section.bg-gradient-to-r.from-\[\#5B020B\] > div:first-child{gap:40px!important}
    section.bg-gradient-to-r.from-\[\#5B020B\] input{height:48px!important;font-size:14px!important}
    section.bg-gradient-to-r.from-\[\#5B020B\] button{height:48px!important;padding:0 22px!important;background:var(--hm-red)!important;border-radius:12px!important}
    section.bg-gradient-to-r.from-\[\#5B020B\] .max-w-lg{border-radius:15px!important;padding:6px!important}
    section.bg-gradient-to-r.from-\[\#5B020B\] .grid-cols-2.md\:grid-cols-4{max-width:1180px!important;margin-top:28px!important;padding-top:20px!important}

    section.max-w-7xl.mx-auto.px-4.-mt-8{max-width:1180px!important;margin-top:-22px!important}
    section.max-w-7xl.mx-auto.px-4.-mt-8 > div{gap:14px!important}
    section.max-w-7xl.mx-auto.px-4.-mt-8 > div > div{
      min-height:92px!important;padding:15px 16px!important;border-radius:16px!important;
      box-shadow:0 7px 24px rgba(16,24,40,.07)!important;border:1px solid #eceef2!important;
    }
    section.max-w-7xl.mx-auto.px-4.-mt-8 .w-12.h-12{width:48px!important;height:48px!important;border-radius:14px!important;background:#fff0f2!important}

    section.py-16.px-4.max-w-7xl.mx-auto{max-width:1180px!important;padding-top:58px!important;padding-bottom:58px!important}
    section.py-16.px-4.max-w-7xl.mx-auto h3{letter-spacing:-.025em!important;font-size:30px!important}
    section.py-16.px-4.max-w-7xl.mx-auto .mb-12,
    section.py-16.px-4.max-w-7xl.mx-auto .mb-10{margin-bottom:30px!important}

    section.py-16.px-4.max-w-7xl.mx-auto .grid-cols-2.md\:grid-cols-4 > div{
      min-height:180px!important;padding:28px 20px!important;border-radius:18px!important;
      box-shadow:0 8px 25px rgba(16,24,40,.045)!important;border-color:#eceef2!important;
    }
    section.py-16.px-4.max-w-7xl.mx-auto .grid-cols-2.md\:grid-cols-4 > div .w-12.h-12{width:52px!important;height:52px!important;background:#fff0f2!important}

    #billingTabContainer{gap:10px!important;margin-top:24px!important}
    #billingTabContainer .billing-tab{
      min-width:145px!important;min-height:58px!important;padding:10px 18px!important;
      border-radius:999px!important;border:1px solid #dfe3ea!important;background:#fff!important;
      box-shadow:0 2px 8px rgba(16,24,40,.025)!important;color:#25324a!important;
    }
    #billingTabContainer .billing-tab.bg-red-brand{
      background:var(--hm-red)!important;border-color:var(--hm-red)!important;color:#fff!important;
      box-shadow:0 8px 22px rgba(228,0,37,.2)!important;
    }
    #billingTabContainer .billing-tab div:first-child{font-size:13px!important}
    #billingTabContainer .billing-tab div:nth-child(2){font-size:11px!important}

    #billingTabContainer + .grid.md\:grid-cols-4{gap:22px!important;align-items:stretch!important}
    #billingTabContainer + .grid.md\:grid-cols-4 > div{
      min-height:610px!important;padding:28px 26px 22px!important;border-radius:22px!important;
      border:1px solid #e2e6ec!important;box-shadow:0 10px 32px rgba(16,24,40,.055)!important;
    }
    #billingTabContainer + .grid.md\:grid-cols-4 > div:nth-child(2){
      border:2px solid var(--hm-red)!important;box-shadow:0 18px 42px rgba(228,0,37,.12)!important;transform:translateY(-10px)!important;
    }
    #billingTabContainer + .grid.md\:grid-cols-4 > div:nth-child(2) .absolute{
      top:-17px!important;background:var(--hm-red)!important;padding:7px 20px!important;border-radius:999px!important;font-size:11px!important;
    }
    #billingTabContainer + .grid.md\:grid-cols-4 h4{font-size:23px!important;letter-spacing:-.02em!important}
    #billingTabContainer + .grid.md\:grid-cols-4 p{font-size:12px!important;color:#748096!important}
    #billingTabContainer + .grid.md\:grid-cols-4 .text-4xl{font-size:42px!important;line-height:1!important;color:var(--hm-red)!important}
    #billingTabContainer + .grid.md\:grid-cols-4 .text-2xl{font-size:25px!important}
    #billingTabContainer + .grid.md\:grid-cols-4 .inline-block{margin-top:4px!important;padding:5px 12px!important;border-radius:999px!important;background:#ffe3e7!important}
    #billingTabContainer + .grid.md\:grid-cols-4 ul{margin-top:25px!important;padding-top:20px!important;line-height:1.35!important}
    #billingTabContainer + .grid.md\:grid-cols-4 li{min-height:22px!important;font-size:13px!important;color:#526071!important}
    #billingTabContainer + .grid.md\:grid-cols-4 li i{font-size:12px!important}
    #billingTabContainer + .grid.md\:grid-cols-4 a{min-height:48px!important;border-radius:12px!important;font-size:13px!important}

    section.py-16.px-4.max-w-7xl.mx-auto .md\:grid-cols-12{gap:18px!important}
    section.py-16.px-4.max-w-7xl.mx-auto .gauge-container{width:220px!important;height:110px!important}
    section.py-16.px-4.max-w-7xl.mx-auto .gauge-body{background:conic-gradient(from 270deg,#ffe4e8 0deg,#e40025 165deg,#ffe4e8 165deg 180deg)!important}
    section.py-16.px-4.max-w-7xl.mx-auto .gauge-inner{left:24px!important;right:24px!important;height:86px!important}
    section.py-16.px-4.max-w-7xl.mx-auto .gauge-needle{height:82px!important;width:5px!important;transform:rotate(42deg)!important}
    section.py-16.px-4.max-w-7xl.mx-auto .gauge-center-dot{width:18px!important;height:18px!important}

    section.max-w-7xl.mx-auto.px-4.my-10 > div,
    section.max-w-7xl.mx-auto.px-4.my-8 > div{
      border-radius:22px!important;padding:28px 34px!important;
      background:linear-gradient(105deg,#85000f,#e40025)!important;
      box-shadow:0 16px 35px rgba(228,0,37,.16)!important;
    }

    section.py-16.px-4.max-w-7xl.mx-auto .md\:grid-cols-12 > .md\:col-span-3{border-radius:20px!important}
    section.py-16.px-4.max-w-7xl.mx-auto .md\:col-span-9 > div{min-height:190px!important;border-radius:18px!important;padding:22px!important}

    .faq-item{min-height:54px!important;padding:17px 20px!important;border-radius:14px!important;box-shadow:0 4px 16px rgba(16,24,40,.035)!important}
    .faq-item h4{font-size:13px!important}
    .faq-answer{font-size:13px!important}

    a,button,.group{transition:all .2s ease}

    @media(max-width:767px){
      section.bg-gradient-to-r.from-\[\#5B020B\]{padding-top:40px!important}
      section.bg-gradient-to-r.from-\[\#5B020B\] h2{font-size:38px!important}
      section.bg-gradient-to-r.from-\[\#5B020B\] .w-72.h-80{display:none!important}
      section.max-w-7xl.mx-auto.px-4.-mt-8{margin-top:12px!important}
      section.py-16.px-4.max-w-7xl.mx-auto{padding-top:42px!important;padding-bottom:42px!important}
      section.py-16.px-4.max-w-7xl.mx-auto h3{font-size:24px!important}
      #billingTabContainer{overflow-x:auto;justify-content:flex-start!important;flex-wrap:nowrap!important;padding:4px 2px 10px!important}
      #billingTabContainer .billing-tab{min-width:145px!important;flex:0 0 auto}
      #billingTabContainer + .grid.md\:grid-cols-4 > div{min-height:auto!important}
      #billingTabContainer + .grid.md\:grid-cols-4 > div:nth-child(2){transform:none!important;margin-top:8px!important}
    }