/* ============================================================
   Design Tokens — edit here to update the entire site palette
   ============================================================ */
:root {
  --color-orange:   #F7941E;
  --color-cta:      #FF8B00;
  --color-cta-hover:#e07a00;
  --color-green:    #17B978;
  --color-bg:       #111113;
  --color-bg-card:  #18181b;
  --color-white:    #f4f4f5;
  --color-muted:    rgba(244, 244, 245, 0.55);
  --color-border:   rgba(255, 255, 255, 0.10);
  --color-glass:    rgba(255, 255, 255, 0.035);

  --font-display:   'DM Sans', system-ui, sans-serif;
  --font-base:      'DM Sans', system-ui, sans-serif;

  --radius-base:    10px;
  --radius-lg:      16px;
  --transition:     0.35s cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-card:    0 2px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-glow:    0 0 60px rgba(247, 148, 30, 0.08);
}

/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  top: 0 !important;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
  margin: 0;  padding: 0;  border: 0;
  font-size: 100%;  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
h2, h3, h4, h5, h6, p, ul, li { margin: 0; padding: 0; list-style: none; }

a {
  margin: 0; padding: 0; list-style: none;
  text-decoration: none !important;
  transition: color var(--transition), opacity var(--transition);
}

input, button { outline: none; }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-base);
}

img { max-width: 100%; height: auto; vertical-align: middle; }
#page-top { overflow-x: hidden !important; }

p {
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: 0.01em;
}

.item_center .container .row { align-items: center; }

/* ============================================================
   Entrance animations
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero_content,
.next_generation_content,
.testing_single_item,
.choose_single_item,
.cloud_title,
.cloud_image,
.contact_content,
.features_single_item,
.say_client_items,
.pricing_single_box,
.pricing_tier_header,
.pentesting_item,
.mission_vission_item,
.committed_content,
.cloud_based_items,
.aligning_content,
.faq_item,
.variant_header { animation: fadeInUp 0.65s ease-out both; }

.testing_row .col-lg-6:nth-child(2) .testing_single_item,
.features_row .col-lg-6:nth-child(2) .features_single_item,
.pricing_row_area .col-lg-3:nth-child(2) .pricing_single_box,
.pricing_row_area .col-lg-6:nth-child(2) .pricing_single_box { animation-delay: 0.08s; }
.features_row .col-lg-6:nth-child(3) .features_single_item,
.pricing_row_area .col-lg-3:nth-child(3) .pricing_single_box { animation-delay: 0.16s; }
.features_row .col-lg-6:nth-child(4) .features_single_item,
.pricing_row_area .col-lg-3:nth-child(4) .pricing_single_box { animation-delay: 0.24s; }
.features_row .col-lg-6:nth-child(5) .features_single_item { animation-delay: 0.30s; }
.features_row .col-lg-6:nth-child(6) .features_single_item { animation-delay: 0.36s; }
.features_row .col-lg-6:nth-child(7) .features_single_item { animation-delay: 0.42s; }
.features_row .col-lg-6:nth-child(8) .features_single_item { animation-delay: 0.48s; }

/* ============================================================
   Header — fixed, frosted glass
   ============================================================ */
.header_area {
  padding: 14px 0;
  background: rgba(17, 17, 19, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header_area .container .row { align-items: center; }

.logo a.logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.logo a.logo-link img {
  height: 30px;
  width: auto;
  transition: opacity var(--transition);
}

.logo a.logo-link:hover img { opacity: 0.8; }

.logo a.logo-link .logo-sub {
  font-family: 'Courier New', monospace;
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
  transition: color var(--transition);
}

.logo a.logo-link:hover .logo-sub { color: rgba(244,244,245,0.70); }

.f_logo a.logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.f_logo a.logo-link img {
  height: 50px;
  width: auto;
}

.f_logo a.logo-link .logo-sub {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 6px;
  transition: color var(--transition);
}

.f_logo a.logo-link:hover .logo-sub { color: rgba(244,244,245,0.55); }

.logo a img {
  height: 30px;
  width: auto;
  transition: opacity var(--transition);
}
.logo a:hover img { opacity: 0.8; }

.menu ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.menu ul li a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  color: rgba(244,244,245,0.65);
  font-family: var(--font-base);
  font-size: 14.5px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.01em;
  transition: color var(--transition), background var(--transition);
}

.menu ul li a::after { display: none; }

.menu ul li a:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.07);
}

/* Nav CTA buttons (Sign In / Start Free) */
.menu ul li.nav-cta-signin a {
  color: var(--color-white);
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 7px 18px;
  margin-left: 4px;
  transition: border-color var(--transition), background var(--transition);
}
.menu ul li.nav-cta-signin a:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.07);
}

.menu ul li.nav-cta-signup a {
  color: var(--color-bg);
  font-weight: 600;
  background: var(--color-orange);
  border-radius: 8px;
  padding: 7px 20px;
  margin-left: 4px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 12px rgba(247,148,30,0.18);
}
.menu ul li.nav-cta-signup a:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(247,148,30,0.30);
  color: var(--color-bg);
}

.nav-icon {
  display: none;
  float: right;
  text-decoration: none !important;
}

.nav-icon i {
  font-size: 22px;
  color: var(--color-orange);
  width: 42px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: rgba(247,148,30,0.08);
  transition: background var(--transition);
}
.nav-icon:hover i { background: rgba(247,148,30,0.18); }

/* ============================================================
   Hero Section (index)
   ============================================================ */
.hero_section {
  background: url('../images/background/hero.png') no-repeat center center / cover;
  padding-top: 220px;
  padding-bottom: 60px;
  position: relative;
}

.hero_section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 200px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.hero_content {
  position: relative;
  z-index: 2;
}

.hero_content h1 {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  line-height: 122%;
  letter-spacing: -0.025em;
  max-width: 680px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.hero_content h1 span {
  color: #FFA733;
  display: block;
  text-shadow: 0 0 32px rgba(247, 148, 30, 0.4), 0 0 80px rgba(247, 148, 30, 0.15);
  font-weight: 700;
}

/* Hero subtitle + dual CTAs */
.hero_subtitle {
  color: rgba(244,244,245,0.72);
  font-family: var(--font-base);
  font-size: 19px;
  font-weight: 400;
  line-height: 170%;
  max-width: 560px;
  margin-top: 18px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  animation: fadeInUp 0.65s ease-out 0.12s both;
}

.hero_ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  animation: fadeInUp 0.65s ease-out 0.22s both;
}

.hero_cta_primary {
  display: inline-block;
  padding: 16px 48px;
  border-radius: var(--radius-base);
  background: linear-gradient(135deg, #FFB347 0%, #F7941E 50%, #FF8B00 100%);
  color: #000 !important;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 28px rgba(247,148,30,0.45), 0 0 60px rgba(247,148,30,0.15);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.hero_cta_primary:hover {
  background: linear-gradient(135deg, #FFC266 0%, #FFB347 50%, #F7941E 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(247,148,30,0.55), 0 0 80px rgba(247,148,30,0.20);
}

.hero_cta_ghost {
  display: inline-block;
  padding: 16px 36px;
  border-radius: var(--radius-base);
  border: 2px solid rgba(255,255,255,0.45);
  color: #ffffff !important;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.08);
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.hero_cta_ghost:hover {
  border-color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.14);
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(255,255,255,0.08);
}

/* ============================================================
   How It Works
   ============================================================ */
.how_it_works_section {
  background: var(--color-bg);
  padding-top: 90px;
  padding-bottom: 20px;
  position: relative;
}

.how_it_works_header {
  padding-bottom: 40px;
}

.how_it_works_header h2 {
  padding-bottom: 12px;
}

.how_it_works_header p {
  color: rgba(244,244,245,0.65);
  font-size: 17px;
  max-width: 480px;
}

.how_it_works_row .col-lg-3 {
  margin-bottom: 24px;
}

.hiw_card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 30px 24px 28px;
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  animation: fadeInUp 0.65s ease-out both;
}

.how_it_works_row .col-lg-3:nth-child(2) .hiw_card { animation-delay: 0.08s; }
.how_it_works_row .col-lg-3:nth-child(3) .hiw_card { animation-delay: 0.16s; }
.how_it_works_row .col-lg-3:nth-child(4) .hiw_card { animation-delay: 0.24s; }

.hiw_card:hover {
  border-color: rgba(247,148,30,0.22);
  box-shadow: var(--shadow-glow);
  transform: translateY(-3px);
}

.hiw_number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-bg);
  background: var(--color-orange);
  margin-bottom: 18px;
  box-shadow: 0 0 20px rgba(247,148,30,0.25);
}

.hiw_connector {
  display: none;
}

/* Show connector line between cards on desktop */
@media (min-width: 992px) {
  .hiw_connector {
    display: block;
    position: absolute;
    top: 49px;
    right: -16px;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, rgba(247,148,30,0.30), rgba(247,148,30,0.05));
    z-index: 2;
  }
}

.hiw_card h5 {
  color: #FFAA3B;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 8px;
  text-shadow: 0 0 18px rgba(247,148,30,0.12);
}

.hiw_card p {
  color: rgba(244,244,245,0.65);
  font-size: 14.5px;
  line-height: 170%;
}

/* ============================================================
   Free Tier CTA Banner
   ============================================================ */
.free_tier_banner {
  background: var(--color-bg);
  padding: 0 0 80px;
}

.free_tier_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 52px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(247,148,30,0.15);
  background: radial-gradient(ellipse at 20% 50%, rgba(247,148,30,0.06) 0%, transparent 60%), var(--color-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 80px rgba(247,148,30,0.04);
  animation: fadeInUp 0.65s ease-out both;
}

.free_tier_text h3 {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 8px;
}

.free_tier_text p {
  color: rgba(244,244,245,0.65);
  font-size: 15px;
  line-height: 170%;
  max-width: 560px;
}

.free_tier_cta {
  display: inline-block;
  padding: 16px 48px;
  border-radius: var(--radius-base);
  background: var(--color-orange);
  color: var(--color-bg) !important;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(247,148,30,0.22);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.free_tier_cta:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 32px rgba(247,148,30,0.34);
}

.free_tier_features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.free_tier_feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.free_tier_feature strong {
  color: var(--color-white);
  font-size: 15px;
  display: block;
  margin-bottom: 2px;
}

.free_tier_feature p {
  color: rgba(244,244,245,0.55);
  font-size: 13.5px;
  line-height: 155%;
  padding: 0;
}

.ftf_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 56px;
  margin-top: 1px;
  background: rgba(23,185,120,0.15);
  color: var(--color-green);
  border: 1px solid rgba(23,185,120,0.25);
}

.ftf_badge--price {
  background: rgba(247,148,30,0.12);
  color: var(--color-orange);
  border-color: rgba(247,148,30,0.22);
}

.ftf_badge--price small {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 1px;
}

/* ============================================================
   Next Generation / Intro
   ============================================================ */
.yappo_next_generation {
  background: var(--color-bg);
  padding-top: 60px;
  padding-bottom: 100px;
}

.next_generation_content p {
  font-size: 17px;
  padding-bottom: 18px;
  color: rgba(244,244,245,0.78);
  line-height: 185%;
}

.next_image img {
  opacity: 0.45;
  transition: opacity var(--transition);
}
.next_image img:hover { opacity: 0.65; }

/* ============================================================
   Section Titles (h2)
   ============================================================ */
h2 {
  color: #1ED98C;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 135%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 0 24px rgba(23, 185, 120, 0.25);
}

/* ============================================================
   Two Core Services
   ============================================================ */
.title_penetration h2 { padding-bottom: 40px; }

.penetration_section {
  background: url('../images/background/penetration-testing.png') no-repeat scroll 0 0 / 100% 100%;
  background-color: var(--color-bg);
  padding-bottom: 100px;
}

.testing_single_item {
  margin-bottom: 20px;
  padding: 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.testing_single_item:hover {
  border-color: rgba(247,148,30,0.22);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.testing_single_item h5 {
  color: #FFAA3B;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  padding-bottom: 14px;
  text-shadow: 0 0 20px rgba(247, 148, 30, 0.18);
}

.testing_row .col-lg-6 { margin-bottom: 20px; }

/* ============================================================
   Choose Area (Anonymous / Authenticated)
   ============================================================ */
.choose_area {
  background: var(--color-bg);
  padding-bottom: 60px;
}

.choose_single_item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.choose_single_item:hover {
  border-color: rgba(23,185,120,0.2);
  box-shadow: 0 0 48px rgba(23,185,120,0.06);
  transform: translateY(-2px);
}

.choose_title p {
  color: rgba(244,244,245,0.72);
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 175%;
  padding-top: 18px;
  max-width: 860px;
  margin: auto;
  padding-bottom: 32px;
}

.choose_content h4 {
  color: #1ED98C;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  padding-bottom: 14px;
  text-shadow: 0 0 18px rgba(23, 185, 120, 0.18);
}

.choose_content ul li {
  color: rgba(244,244,245,0.72);
  font-size: 15px;
  line-height: 200%;
}

.icon_choose {
  margin-right: 30px;
  width: 72px; height: 72px; min-width: 72px;
  opacity: 0.55;
}

.testing_row_choose .col-lg-6 {
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.testing_row_choose .col-lg-6::after {
  position: absolute;
  content: '';
  width: 60px; height: 60px;
  background-image: url(../images/icon/icon_anonymous.png);
  left: 76px; top: 92px;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.08;
}

/* ============================================================
   Cloud Section (Testing Infrastructure)
   ============================================================ */
.cloud_section_area {
  padding-top: 50px;
  padding-bottom: 110px;
  background: var(--color-bg);
}

.cloud_title { max-width: 880px; width: 100%; padding-bottom: 48px; }
.cloud_title h2 { padding-bottom: 22px; }
.cloud_title p { font-size: 17px; color: rgba(244,244,245,0.72); line-height: 180%; }

.cloud_image img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* Infrastructure diagram — has baked-in checker bg */
.cloud_image--infra {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.cloud_image--infra img {
  width: 100%;
  max-width: 820px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}

/* ============================================================
   Contact / CTA
   ============================================================ */
.contact_content { margin-top: 100px; }
.contact_content h2 {
  margin-bottom: 22px;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(247, 148, 30, 0.12);
}
.contact_content p { padding-bottom: 18px; max-width: 852px; margin: auto; }

.contact_content a {
  color: var(--color-bg);
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-base);
  background: var(--color-orange);
  padding: 15px 52px;
  display: inline-block;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 20px rgba(247,148,30,0.22);
}

.contact_content a:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(247,148,30,0.32);
}

/* ============================================================
   Footer
   ============================================================ */
.footer_section_area {
  background: url('../images/background/footer.png') no-repeat scroll 0 0 / 100% 100%;
  background-color: var(--color-bg);
  padding-top: 56px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer_top { display: flex; justify-content: space-between; align-items: start; }
.copyright { padding-top: 44px; }
.copyright p { color: var(--color-muted); font-size: 13px; }

.contact_address a {
  color: var(--color-white);
  font-size: 16px;
  padding-bottom: 16px;
  display: inline-block;
}
.contact_address a:hover { color: var(--color-orange); }
.contact_address p { color: var(--color-muted); font-size: 14px; line-height: 185%; }

.get_in h5 {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.Privacy_Policy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.Privacy_Policy a {
  color: var(--color-green);
  font-size: 14px;
  font-weight: 600;
  padding-top: 16px;
  display: inline-block;
  margin-right: 18px;
}
.Privacy_Policy .footer_social_icon {
  margin-left: auto;
}
.Privacy_Policy a:hover { color: var(--color-orange); }

.footer_social_icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  font-size: 15px;
  color: var(--color-muted) !important;
  vertical-align: middle;
  margin-left: 4px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.footer_social_icon:hover {
  color: var(--color-white) !important;
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}

.footer_certifications {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 32px 0 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 32px;
}

.footer_certifications img {
  height: 32px;
  width: auto;
  opacity: 0.35;
  transition: opacity var(--transition), filter var(--transition);
  filter: grayscale(100%);
}
.footer_certifications img:hover { opacity: 0.8; filter: grayscale(0%); }

/* ============================================================
   Our Platform — Hero
   ============================================================ */
.hero_our_platform_section {
  background: url('../images/background/hero-our-platfrom.png') no-repeat center center / cover;
  padding-top: 190px;
  padding-bottom: 50px;
  position: relative;
}

.hero_our_platform_section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 160px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

/* ============================================================
   Cloud Based Platform Cards
   ============================================================ */
.cloud_based_content h5 {
  color: var(--color-green);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  padding-bottom: 6px;
}

.cloud_based_content h6 {
  color: var(--color-orange);
  font-size: 15px;
  font-weight: 500;
  line-height: 155%;
  padding-bottom: 8px;
}

.cloud_based_image img { width: 100%; border-radius: var(--radius-base); }

.cloud_based_content {
  padding: 22px;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.cloud_based_items {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  transition: transform var(--transition);
}
.cloud_based_items:hover { transform: translateY(-2px); }

.cloud__based_section_area {
  padding-top: 70px;
  padding-bottom: 80px;
  background: var(--color-bg);
  position: relative;
  z-index: 1;
}

.cloud__based_section_area::after {
  position: absolute;
  content: '';
  width: 100%; height: 100%;
  background-image: url(../images/background/cloud-base-signal.png);
  left: 0; bottom: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  opacity: 0.5;
}

.cloud__based_section_area .cloud_title { padding-bottom: 30px; }

.vulnerabilities_image { padding-top: 20px; }
.vulnerabilities_image img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   Contact Section Area
   ============================================================ */
.contact_section_area {
  background: var(--color-bg);
  padding-top: 90px;
  padding-bottom: 100px;
}

.contact_section_area .contact_content { margin-top: 0; }
.contact_section_area .contact_content p { color: rgba(244,244,245,0.72); }

/* ============================================================
   Client Testimonials
   ============================================================ */
.what_our_client_section {
  background: var(--color-bg);
  padding-top: 100px;
}

.say_client_items {
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px;
  max-width: 588px;
  width: 100%;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}

.say_client_items:hover {
  border-color: rgba(247,148,30,0.18);
  transform: translateY(-2px);
}

.say_client_items p {
  color: rgba(244,244,245,0.78);
  font-style: italic;
  line-height: 180%;
}

.say_client_items h4 {
  color: var(--color-orange);
  text-align: right;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  padding-top: 14px;
  font-style: normal;
}

.client_say_ingle_area .client_say_ingle:nth-child(1),
.client_say_ingle_area .client_say_ingle:nth-child(2),
.client_say_ingle_area .client_say_ingle:nth-child(3) {
  position: relative; z-index: 1;
  max-width: 588px; width: 100%;
}

.client_say_ingle_area .client_say_ingle:nth-child(1)::after,
.client_say_ingle_area .client_say_ingle:nth-child(2)::after,
.client_say_ingle_area .client_say_ingle:nth-child(3)::after { display: none; }

.client_say_ingle_area .client_say_ingle:nth-child(1) { margin-bottom: 24px; }
.client_say_ingle_area .client_say_ingle:nth-child(2) { margin: auto; }
.client_say_ingle_area .client_say_ingle:nth-child(3) { float: right; margin-top: 24px; }

.row.row_client_say {
  background-image: radial-gradient(50% 50% at 50% 50%, rgba(247,148,30,0.10) 0%, transparent 100%);
}

/* ============================================================
   Surface Scans Page
   ============================================================ */
.surface_section_area {
  padding-top: 70px;
  padding-bottom: 70px;
  background: var(--color-bg);
  background-image: linear-gradient(180deg, rgba(247,148,30,0) 16%, rgba(247,148,30,0.10) 100%);
}

.surface_section_area .cloud_title { padding-bottom: 30px; }

.sp { padding-top: 70px; padding-bottom: 70px; }
.bg_black { background: var(--color-bg); }

/* ============================================================
   Features Section
   ============================================================ */
.Features_section { padding-top: 80px; padding-bottom: 20px; }

.features_single_item {
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 26px;
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.features_single_item:hover {
  border-color: rgba(247,148,30,0.18);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.features_single_item h5 {
  color: #FFAA3B;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 8px;
  text-shadow: 0 0 18px rgba(247, 148, 30, 0.15);
}

.features_single_item p { color: rgba(244,244,245,0.70); line-height: 175%; }

.row.features_row .col-lg-6 { margin-bottom: 20px; }

.row.features_row {
  position: relative;
  z-index: 1;
}

.row.features_row::after {
  position: absolute;
  content: '';
  width: 460px; height: 460px;
  background: url(../images/icon/Looper-2.png) no-repeat 100% 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  z-index: -1;
  opacity: 0.18;
}

.surface_scans .contact_content p {
  padding-bottom: 22px;
  max-width: 978px;
  margin: auto;
  color: rgba(244,244,245,0.72);
  font-size: 17px;
  line-height: 175%;
  text-align: left;
}

/* ============================================================
   Compliance / Aligning
   ============================================================ */
.aligning_content h2 { padding-bottom: 26px; }

.aligning_content p {
  padding-bottom: 16px;
  color: rgba(244,244,245,0.76);
  font-size: 17px;
  line-height: 178%;
}

.aligning_content p span {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.pentesting_item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--transition), transform var(--transition);
}

.pentesting_item:hover {
  border-color: rgba(23,185,120,0.18);
  transform: translateY(-2px);
}

.pentesting_img { width: 150px; min-width: 150px; margin-right: 28px; }
.pentesting_img img { width: 100%; }

.pentesting_content h4 {
  color: var(--color-green);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 140%;
  padding-bottom: 12px;
}

.pentesting_content p {
  color: rgba(244,244,245,0.72);
  font-size: 15.5px;
  line-height: 178%;
  padding-bottom: 10px;
}

.some_items { padding-top: 36px; padding-bottom: 32px; }
.some_items p {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.Aligning_section_area { padding-bottom: 0; }

.contact_section_area.navigating_content { padding-top: 50px; }
.navigating_content .contact_content p {
  max-width: 1320px;
  text-align: left;
  color: rgba(244,244,245,0.72);
  font-size: 17px;
  line-height: 178%;
}
.navigating_content .contact_content h2 { text-align: left; }

/* ============================================================
   Pricing
   ============================================================ */
.Flexible_Pricing_section_area { position: relative; z-index: 1; padding-bottom: 0; }

.Flexible_Pricing_section_area::after {
  position: absolute;
  content: "";
  width: 450px; height: 550px;
  background: url(../images/icon/Looper-4.png) no-repeat 100% 100%;
  right: 0; top: 208px;
  z-index: -1;
  opacity: 0.15;
}

/* --- Tier section headers --- */
.pricing_tier_header {
  margin-top: 56px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.pricing_tier_header:first-of-type { margin-top: 0; }

.pricing_tier_label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pricing_tier_label--green  { color: var(--color-green); }
.pricing_tier_label--orange { color: var(--color-orange); }

.pricing_tier_desc {
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 160%;
  max-width: 680px;
}

/* --- Card grid --- */
.pricing_row_area {
  padding-top: 0;
  padding-bottom: 56px;
}

.pricing_row_area .col-lg-3.col-sm-6,
.pricing_row_area .col-lg-6.col-sm-12 { margin-bottom: 20px; }

/* --- Card base --- */
.pricing_single_box {
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 100%;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.pricing_single_box:hover {
  border-color: rgba(247,148,30,0.22);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* accent top border variants */
.pricing_single_box--green {
  border-top: 2px solid var(--color-green);
}

.pricing_single_box--green:hover {
  border-color: rgba(23,185,120,0.30);
  border-top-color: var(--color-green);
  box-shadow: 0 0 60px rgba(23,185,120,0.08);
}

.pricing_single_box--orange {
  border-top: 2px solid var(--color-orange);
}

/* --- Card title --- */
.pricing_single_box h4 {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
}

.pricing_single_box--green h4 { color: var(--color-green); }

/* --- Price display --- */
.pricing_price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.pricing_price--green  { color: var(--color-green); }
.pricing_price--orange { color: var(--color-orange); }

.pricing_price_unit {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-muted);
}

/* --- Feature list --- */
.pricing_features {
  list-style: none;
  padding: 0;
  margin: 0 0 auto 0;
  flex: 1;
}

.pricing_features li {
  position: relative;
  padding-left: 22px;
  padding-bottom: 11px;
  font-size: 0.9rem;
  line-height: 155%;
  color: rgba(244,244,245,0.82);
  font-weight: 500;
}

.pricing_features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-orange);
}

.pricing_single_box--green .pricing_features li::before {
  color: var(--color-green);
}

.pricing_features li:last-child { padding-bottom: 0; }

/* --- Card description (for Custom/proposal cards) --- */
.pricing_card_desc {
  color: rgba(244,244,245,0.70);
  font-size: 0.9rem;
  line-height: 165%;
  flex: 1;
}

/* --- Card CTA button --- */
.pricing_single_box .pricing_cta {
  color: var(--color-bg);
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-base);
  background: var(--color-orange);
  padding: 13px 10px;
  display: block;
  width: 100%;
  margin-top: 24px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(247,148,30,0.18);
}

.pricing_single_box .pricing_cta:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(247,148,30,0.28);
}

/* green CTA variant */
.pricing_cta--green {
  background: var(--color-green) !important;
  box-shadow: 0 4px 16px rgba(23,185,120,0.18) !important;
}

.pricing_cta--green:hover {
  background: #12a066 !important;
  box-shadow: 0 6px 22px rgba(23,185,120,0.28) !important;
}

/* ghost / outline CTA for secondary actions */
.pricing_single_box .pricing_cta--ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-white);
  box-shadow: none;
}

.pricing_single_box .pricing_cta--ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.20);
  box-shadow: none;
  transform: translateY(-1px);
}

/* --- Inline link inside card --- */
.pricing_inline_link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-orange);
  margin-top: 16px;
  transition: color var(--transition);
}

.pricing_inline_link:hover {
  color: var(--color-cta-hover);
}

/* legacy .pricing_single_box a — reset for non-cta links */
.pricing_single_box a:not(.pricing_cta):not(.pricing_inline_link) {
  color: var(--color-bg);
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-base);
  background: var(--color-orange);
  padding: 13px 10px;
  display: block;
  width: 100%;
  margin-top: 24px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(247,148,30,0.18);
}

.pricing_single_box a:not(.pricing_cta):not(.pricing_inline_link):hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(247,148,30,0.28);
}

/* ============================================================
   Variant Section Headers (Continuous Pentest page)
   ============================================================ */
.variant_header {
  border-left: 3px solid var(--color-orange);
  padding-left: 18px;
  margin-bottom: 36px;
}

.variant_label {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.variant_title {
  color: var(--color-white) !important;
  font-size: 1.45rem !important;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: none !important;
  text-shadow: none !important;
}

.variant_desc {
  color: rgba(255,255,255,0.65);
  max-width: 680px;
  margin-bottom: 0;
}

/* ============================================================
   Section Utility Classes
   ============================================================ */
.section_subtitle {
  color: var(--color-muted);
  max-width: 600px;
  margin: 12px auto 40px;
  font-size: 0.95rem;
}

.section_note {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.section_note b {
  color: var(--color-white);
}

.inline_link {
  color: var(--color-orange);
  transition: color var(--transition);
}

.inline_link:hover {
  color: var(--color-cta-hover);
}

.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.pt-0  { padding-top: 0 !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-70 { padding-bottom: 70px !important; }
.pb-80 { padding-bottom: 80px !important; }
.pt-70 { padding-top: 70px !important; }
.mb-32 { margin-bottom: 32px; }
.mt-20 { margin-top: 20px; }

/* ============================================================
   FAQ Items (distinct from feature cards)
   ============================================================ */
.faq_item {
  border-radius: var(--radius-lg);
  background: var(--color-glass);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 26px;
  height: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.faq_item:hover {
  border-color: rgba(23,185,120,0.18);
  box-shadow: 0 0 48px rgba(23,185,120,0.06);
  transform: translateY(-2px);
}

.faq_item h5 {
  color: var(--color-green);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 10px;
}

.faq_item p {
  color: rgba(244,244,245,0.70);
  line-height: 175%;
}

/* ============================================================
   About Us
   ============================================================ */
.committed_content h2 { padding-bottom: 22px; }
.committed_content p { color: rgba(244,244,245,0.76); line-height: 182%; }

.mission_section_area { padding-bottom: 60px; }

.mission_vission_item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition);
}

.mission_vission_item:hover {
  border-color: rgba(247,148,30,0.18);
  transform: translateY(-2px);
}

.mission_vission_item h4 {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  padding-bottom: 10px;
}

.mission_section_area .container .row .col-lg-4.col-md-6 { margin-bottom: 20px; }

.Certifications_Our_section { padding-bottom: 90px; padding-top: 50px; }

.certificate_content h2 { padding-bottom: 18px; }
.certificate_content { max-width: 856px; padding-bottom: 44px; }
.certificate_content p { color: rgba(244,244,245,0.70); }

.team_holds_area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: 48px;
}

.team_content h4 {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 145%;
  text-transform: capitalize;
  padding-top: 10px;
  max-width: 209px;
  margin: auto;
}

.team_logo {
  text-align: center;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team_logo img {
  filter: grayscale(40%);
  opacity: 0.65;
  transition: filter var(--transition), opacity var(--transition);
}
.team_logo img:hover { filter: grayscale(0%); opacity: 1; }

.Certifications_Our_section {
  background-image: radial-gradient(50% 50% at 50% 50%, rgba(247,148,30,0.10) 0%, transparent 100%);
}

.mobile_image { display: none; }

/* ============================================================
   Utilities
   ============================================================ */
html { scroll-behavior: smooth; }
::selection { background: rgba(247,148,30,0.28); color: var(--color-white); }