/* ================= TOKENS & THEME ================= */
:root{
  /* Brand gradients & solid */
  --brand: #ff0561;
  --brand-strong: #cc004d;
  --brand-soft: #ff7fa8;

  --brand-gradient: linear-gradient(to right, #ff0561, #f80073, #ef0084, #e21293, #d224a2);
  --brand-strong-gradient: linear-gradient(to right, #cc004d, #b8005f, #9f006f, #7f0a7f, #66008a);
  --brand-soft-gradient: linear-gradient(to right, #ff7fa8, #ff8fb8, #f79fc8, #e8afd8, #d8bfe8);

  /* semantic colors */
  --ink: #0f172a;
  --text: #333333;
  --muted: #64748b;
  --secondary: #FF4D8D; /* juga text-brand */
  --blue: #003580;

  /* surfaces */
  --surface: #ffffff;
  --surface-subtle: #f7f8fb;
  --surface-dark: #212634;
  --surface-blue : #003580;

  /* borders & shadows */
  --bd: rgba(2,6,23,.10);
  --bd-soft: rgba(2,6,23,.08);
  --shadow-1: 0 1px 0 rgba(16,24,40,.02);
  --shadow-2: 0 10px 30px rgba(16,24,40,.08);
  --shadow-3: 0 12px 32px rgba(16,24,40,.08);

  /* reuseable radii & spacing */
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --section-py: 5rem;

  /* misc */
  --brand-glow: rgba(198,35,120,.16);
  --pulse-color: rgba(255,5,97,.6);
}

/* global */
*{box-sizing: border-box;}
html,body{
  height:100%;
  transform: none !important;
}
body{
  color: var(--text);
  /* font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; */
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background: var(--surface);
  line-height:1.45;
  margin:0;
}

body > div {
    transform: none !important;
}

/* container tweak for very large screens */
@media (min-width:1680px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1600px;
  }
}

.text-white{
  color: #FFF;
}

.text-white-secondary{
  color: rgba(255,255,255,.8);
}
/* ================= NAV ================= */
.navbar-nav .nav-link{
  font-weight:500;
  color: var(--text);
  padding:.75rem 1rem;
  transition: color .18s ease, transform .18s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color: var(--brand); }
.img-logo{ max-height:60px; }

/* ================= BUTTONS ================= */
/* base */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;}

/* ghost */
.btn-ghost{ border:1px solid rgba(0,0,0,.15); background:transparent; }

/* primary brand */
.btn-brand{
  background: var(--brand-gradient);
  color:#fff;
  border:0;
  border-radius: 50px;
  padding:.6rem 1.1rem;
  font-weight:600;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-brand:hover{
  transform: translateY(-2px);
  color:#fff;
  box-shadow: 0 0 12px rgba(255, 90, 160, 0.6), 0 0 22px rgba(214, 61, 209, 0.4);
}

.perf-cta{
  text-align: right;
}
/* navbar variant only tweaks weight */
.navbar .btn-brand{ font-weight:600; }

.btn-disabled, .btn-disabled:hover, .btn-disabled:focus{
  background: var(--bd-soft);
  color: var(--muted);
  border: 1px solid var(--bd-soft);
  cursor:not-allowed;
  opacity:0.6;
}
/* outline secondary */
.btn-outline-secondary{
  border:1px solid #FFDBE8;
  color: var(--secondary);
  background:var(--surface);
  border-radius: 50px;
  padding:.5rem .9rem;
  transition: background .18s ease, color .18s ease;
}
.btn-outline-secondary:hover{
  background: var(--brand-gradient);
  color:#fff;
  border-color: var(--secondary);
}

/* ================= TEXT UTILS ================= */
.text-brand{ color: var(--secondary); }
.text-blue{ color: var(--blue) !important; }

/* ================= HERO ================= */
.gradient-hero{
  /* background-color:#fff5f7; allback */
  background-color:#fff; /* fallback */
  background-repeat:no-repeat;
  background-size:cover;
}

/* hero badge */
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--surface); border:1px solid rgba(0,0,0,.08);
  padding:.45rem .8rem; border-radius:2rem;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}

.hero-badge-footer{
background:#FFDBE8;
}

/* soft shadows & card hover */
.shadow-soft{ box-shadow: var(--shadow-2); }
.card-feature{
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-feature:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

/* Pulse dot */
.pulse-dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 var(--pulse-color);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%   { transform:scale(1);   box-shadow:0 0 0 0 var(--pulse-color); }
  70%  { transform:scale(1.2); box-shadow:0 0 0 12px rgba(255,5,97,0); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(255,5,97,0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pulse-dot, .card-feature, .btn-brand{ animation:none; transition:none; }
}

/* partner images */
.img-partner{ max-height: 40px; }

/* ================= SECTIONS (global padding) ================= */
.section-ops,
.section-data,
.section-impact,
.section-teams,
.section-pricing,
.section-cta,
.section-faq,
.section-why,
.section-command {
  padding-block: var(--section-py);
}

/* specific backgrounds */
.section-why{ background-color: #F8FBFF; }
.section-ops{ background: var(--surface-blue); color: #fff; }
.section-data,
.section-teams,
.section-cta{ background: var(--surface-subtle); }
.section-impact,
.section-pricing{ background: var(--surface); }
.section-dashboard{ background: #131313; color: #fff; }

.section-dashboard{
  padding-top: 5rem;
}
/* ================= CARDS (reusable) ================= */
.ops-card,
.feat-card,
.impact-card,
.team-card,
.price-card{
  background: var(--surface);
  border:1px solid var(--bd);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.team-card{ border-radius: var(--radius-18); }
.price-card{ border-radius: var(--radius-20); }
.ops-card{ border-color: var(--bd-soft); }

/* hover unified */
.ops-card:hover,
.feat-card:hover,
.impact-card:hover,
.team-card:hover,
.price-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.price-card:hover{ box-shadow: var(--shadow-3); }

/* featured variant (shared) */
.feat-card--featured,
.team-card--featured,
.price-card--featured{
  border-color: hsl(345 100% 74% / .45);
  box-shadow: 0 10px 30px hsl(345 100% 74% / .15);
}

/* ================= WHY SECTION ================= */
.why-heading { font-size:48px; line-height:1.2; font-weight:700; margin:0 0 .6rem 0; }
.why-subtext { max-width:480px; color:var(--muted); }
.why-quote { max-width:520px; font-weight:500; color:var(--text); }

.why-button{
  padding: .9rem 2rem;
  font-weight:600;
  border-radius:50px;
  display:inline-flex; align-items:center; gap:.5rem;
}

/* why item list */
.why-item{
  background: var(--surface);
  border: 1px solid var(--bd-soft);
  border-radius:999px;
  padding:1.25rem 1.5rem;
  display:flex; align-items:flex-start; gap:1rem;
  box-shadow: var(--shadow-2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.why-item:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* icon bubble */
.why-icon{
  display:grid; place-items:center;
  color:hsl(345 100% 58%); font-size:1rem;
}

/* ================= TESTIMONIAL ================= */
.testimonial-section{ background:#003580; color:#fff; padding-block: var(--section-py); }
.testimonial-card{ background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.08); color:var(--ink); padding:1.2rem; }
.rating-badge{ background:#ffe4d6; color:#ff7a00; font-weight:600; border-radius:20px; padding:4px 12px; font-size:14px; display:inline-block; }
.testimonial-img{width:48px;height:48px;object-fit:cover;}


/* ================= WHY NOW ================= */
.gradient-card {
    background: linear-gradient(135deg, #E03BBB, #F75478);
    background-size: cover;
    backdrop-filter: blur(4px);
}


/* ================= PRICING ================= */
.pricing-section{ padding-block: var(--section-py); background: var(--surface); }

/* price card base - unified with .price-card above */
.price-card { display:flex; flex-direction:column; height:100%; border-radius:var(--radius-20); }
.price-card .card-body { padding:1.5rem; }

/* featured */
.price-card--featured{
  border:2px solid transparent;
  background: linear-gradient(180deg, rgba(255,250,252,1), #fff 40%);
  box-shadow: 0 12px 34px rgba(226,34,160,0.06);
  position:relative; z-index:2;
  overflow: visible !important;
  border: 1px solid var(--brand);
}
.price-card--featured:hover{ transform: translateY(-6px); }

.price-card-addon{
  border:2px dashed var(--bd-soft);
  background: #0a2342;
  color:#fff
}
/* popular badge (single definition) */
.badge-popular{
  position:absolute;
  left:50%;
  top:-16px;
  transform:translateX(-50%);
  padding:.45rem .85rem;
  border-radius:999px;
  background: var(--blue);
  color:#fff;
  font-weight:700;
  box-shadow: 0 6px 18px var(--brand-glow);
  font-size:.85rem;
}

/* icons in card */
.price-card-icon{
  width:42px; height:42px; display:grid; place-items:center;
  background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,.04);
  box-shadow: 0 6px 18px rgba(0,0,0,.03); font-size:1.05rem;
}
.price-card-icon.featured{ background: linear-gradient(180deg,#fff0f6,#fff); color:var(--brand); }
.price-card-icon.crown{ background:#F6F9FF; color:var(--blue); }
.price-card-icon.building{ background:#fff7f9; color:var(--secondary); }

.price-card-icon-addon{
  width:42px; height:42px; display:grid; place-items:center;
  background:#2D7DFF33; border-radius:10px;
  font-size:1.2rem; color:#fff;
}
/* price typography */
.price-amount{ display:flex; align-items:baseline; gap:.6rem; }
.price-currency{ font-size:.9rem; color:var(--muted); }
.price-value{ font-weight:800; color:var(--ink); }

/* old & discount */
.price-old{ color:var(--muted); font-size:.9rem; }
.price-discount{ background:#e9fdf2; color:#0c7a52; padding:.25rem .5rem; border-radius:12px; font-weight:700; font-size:.85rem; }

/* subscribe button */
.btn-subscribe{ border-radius:50px; padding:.7rem 1rem; font-weight:600; }
.btn-subscribe.btn-brand{ padding:.68rem 1.1rem; }

/* features list */
.price-feature-list{ margin:0; padding:0; list-style:none; }
.price-feature-list li{ display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0;}
.price-feature-list li i{font-size:1.05rem; margin-top:2px; color: var(--brand)}

/* pill segera */
.pill-segera{ display:inline-block; background:#EEF2FF; color:#2b6cb0; font-weight:700; padding:.18rem .5rem; border-radius:999px; font-size:.75rem; }

/* responsive tweak */
@media (min-width: 992px){
  .price-card--featured{ transform: translateY(-6px); border-radius: calc(var(--radius-20) + 2px); }
}
@media (max-width: 767.98px){
  .badge-popular{ top:-12px; font-size:.78rem; padding:.32rem .6rem; }
  .price-value{ font-size:1.25rem; }
}

/* ================= ICON BADGES ================= */
.feat-icon, .team-icon, .impact-icon, .ops-icon, .marketing-icon {
  display:grid; place-items:center; border-radius:var(--radius-12);
  background:#EBF1FB; color: #003580; /* default appearance */
}

.impact-icon, .ops-icon, .team-icon{
  display:grid; place-items:center; border-radius:var(--radius-12);
  background:#FFEEEE; color: var(--brand-soft); /* default appearance */
}

.feat-icon{ width:54px; height:54px; font-size:0.9rem; border-radius: 50%; padding: 0.5rem; }
.team-icon{ font-size:1.2rem; }
.impact-icon{ width:54px; height:54px; border-radius:var(--radius-14); font-size:1.25rem; margin-inline:auto; border-radius: 50%; padding: 0.5rem;}
.ops-icon{ width:48px; height:48px; font-size:1.25rem; }

.marketing-icon{
  width:54px; height:54px;
  border-radius: 15%; padding: 0.5rem;
   background:#2D7DFF; color: #fff;
}
/* ================= LISTS ================= */
.price-list li, .team-list li{ display:flex; align-items:center; gap:.5rem; color:#475569; }
.price-list i{ color: var(--brand); }
.team-list i{ color: var(--brand); }

/* ================= FAQ SECTION ================= */
.section-faq{
  background: linear-gradient(135deg, #A62EED, #4F7CFE);
  padding-block: var(--section-py);
  position: relative; overflow: hidden; color:#fff;
}
.section-faq::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('assets/pattern-lines.svg');
  background-size: cover; background-repeat:no-repeat; opacity:.25; pointer-events:none;
}
.faq-heading{ font-size:42px; font-weight:800; text-align:center; margin-bottom:1rem; color:inherit; }
.faq-subtext{ font-size:1.15rem; color:rgba(255,255,255,.9); margin-bottom:2.5rem; text-align:center; }

.faq-accordion .accordion-item{ border:0; border-radius:20px !important; overflow:hidden; margin-bottom:1.2rem; box-shadow:var(--shadow-2); }
.faq-accordion .accordion-button{ font-size:1.08rem; font-weight:400; border-radius:20px !important; padding:1.4rem 1.8rem; }
.faq-accordion .accordion-button:not(.collapsed){ background-color: rgba(255,255,255,.85); color:var(--ink); box-shadow:none; }
.faq-accordion .accordion-button.collapsed{ background-color:#fff; color:var(--ink); }
.faq-accordion .accordion-body{ background: rgba(255,255,255,.92); padding:1.3rem 1.8rem; font-size:1rem; color:var(--text); background-color:#EBF1FB; }

.accordion-body {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ================= STATS ================= */
.impact-stat{ font-weight:800; line-height:1.1; color:var(--brand); }

/* ================= CTA & FOOTER ================= */
.cta-badge{ padding:.5rem .9rem; border-radius:999px; background:var(--brand-soft-gradient); color:hsl(345 100% 45%); font-weight:600; font-size:.95rem; }

/* CTA command section */
.section-command{ background:#052766; padding-block:var(--section-py); position:relative; overflow:hidden; color:#fff; }
.command-heading{ font-size:42px; font-weight:800; line-height:1.2; margin-bottom:1.2rem; }
.command-subtext{ max-width:540px; font-size:1.1rem; color:rgba(255,255,255,.9); margin-bottom:2rem; }
.command-buttons .btn{ padding:0.9rem 2rem; border-radius:50px; font-weight:600; }
.command-image{ max-width:100%; height:auto; transform:scale(1.1); filter: drop-shadow(0 12px 32px rgba(0,0,0,.3)); opacity: 0.6; }

/* ================= FOOTER ================= */
.full-footer{ background:var(--surface); padding-block:2.2rem; border-top:1px solid var(--bd-soft); }
.footer-logo{ max-height:55px; }
.footer-tagline{ font-size:1rem; font-weight:500; color:var(--muted); }
.footer-copyright{ font-size:.9rem; color:var(--muted); text-align:right; }

/* ================= Accessibility & Focus ================= */
:focus{ outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent); outline-offset: 2px; }
a,button{ text-decoration:none; }

/* small utilities */
.sr-only{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }


.card-sales{
  border: 1px solid #EDEDED;
  border-radius: 1rem;
}

.img-sales{
  max-height: 450px;
}
/* =========================================================
   RESPONSIVE FIXES FOR MOBILE & TABLET
   ========================================================= */

/* ====== Mobile First (max-width: 767px) ====== */
@media (max-width: 767px){

    .text-center-mobile{
        text-align: center !important;
    }
    /* GLOBAL PADDING FIX */
    .section-ops,
    .section-data,
    .section-impact,
    .section-teams,
    .section-pricing,
    .section-cta,
    .section-faq,
    .section-why,
    .section-command {
        padding-block: 2.5rem !important;
    }

    header.gradient-hero {
        padding-top: 2rem !important;
    }

    /* HERO heading */
    .gradient-hero h1,
    .why-heading,
    .display-6,
    .command-heading,
    .faq-heading {
        font-size: 44px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    .lead {
        font-size: 1.1rem !important;
        text-align: center !important
    }

    /* HERO SPACING */
    .hero-badge { transform: scale(.9); }
    .hero-badge small { font-size: .8rem; }

    .gradient-hero .btn-lg{
        padding: .8rem 1.2rem !important;
        font-size: 1rem !important;
    }

    /* IMAGE HERO FIX */
    .gradient-hero img{
        max-height: 260px;
        width: 100%;
        object-fit: contain;
    }

    .img-partner{
        max-height: 30px;
    }

    /* CARDS REDUCE PADDING */
    .card-body{
        padding: 1.2rem !important;
    }

    .team-card .card-body,
    .feat-card .card-body,
    .price-card .card-body{
        padding: 1.5rem !important;
    }

    .perf-cta{
        text-align: center !important;
    }

    /* WHY ITEMS */
    .why-item{
        padding: 1rem 1.2rem;
        gap: 0.8rem;
    }
    .why-item p{ font-size: 1rem !important; }

    /* PRICING CARDS */
    .price-value{
        font-size: 1.5rem !important;
    }
    .price-feature-list li{
        font-size: 1rem !important;
    }
    .badge-popular{
        transform: scale(.9);
    }

    /* TEAMS SECTION */
    .team-card h5{
        font-size: 1.3rem !important;
    }
    .team-list li{
        font-size: 1rem !important;
    }

    /* TESTIMONIAL */
    .testimonial-card{
        padding: 1.2rem !important;
    }

    /* FAQ */
    .faq-heading{ font-size: 26px !important; }
    .faq-subtext{ font-size: 1rem !important; }

    .accordion-button{
        font-size: 1rem !important;
        padding: 1rem !important;
    }

    /* FOOTER */
    .footer-logo{
        max-height: 45px;
    }
    .footer-tagline,
    .footer-copyright{
        text-align: center !important;
        margin-top: 1rem;
    }
}

/* ====== Tablet (768px — 992px) ====== */
@media (min-width:768px) and (max-width: 992px){

    .text-center-mobile{
        text-align: center !important;
    }

    /* Reduce heading */
    .gradient-hero h1,
    .why-heading,
    .display-6,
    .command-heading{
        font-size: 36px !important;
    }

    .lead { font-size: 1.1rem !important; }

    /* Section padding */
    .section-why,
    .section-data,
    .section-ops,
    .section-pricing{
        padding-block: 3rem !important;
    }

    /* Cards */
    .card-body{
        padding: 1.6rem !important;
    }

    /* Hero image */
    .gradient-hero img{
        max-height: 320px;
        object-fit: contain;
    }
}

.img-pillar{
  max-height: 500px;
}

/* ================= PRICING ALIGN FIX ================= */

/* Pastikan semua kolom stretch */
.price-grid {
    display: flex;
    flex-wrap: wrap;
}

.price-grid > div {
    display: flex;
}

/* Card full height */
.price-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Body full height */
.price-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header section */
.price-header {
    min-height: 180px; /* supaya semua bagian atas sejajar */
}

/* Features section */
.price-features {
    min-height: 260px; /* bikin Includes / Everything sejajar */
}

/* Ideal + button selalu di bawah */
.price-ideal {
    margin-top: auto;
}

/* ===== Force Tawk to stay fixed ===== */
iframe[title="chat widget"]{
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

#tawkchat-container,
.tawk-min-container{
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
}