/* ============================================================
   style.css — RamLtd IT Support Website
   RTL Hebrew · Modern IT Aesthetic
   Color Palette: Deep Teal + Lime Green + White (from logo)
   ============================================================ */

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  /* Brand colours (extracted from logo) */
  --teal:        #1A6B7C;
  --teal-dark:   #0E4A58;
  --teal-light:  #2A8FA5;
  --green:       #6BBF2E;
  --green-dark:  #4E9A1A;
  --green-light: #8AD44A;

  /* Neutrals */
  --white:       #FFFFFF;
  --off-white:   #F6F9FC;
  --light-grey:  #EAF0F6;
  --mid-grey:    #A8B8C8;
  --text-dark:   #0D2233;
  --text-body:   #2D4A5E;
  --text-muted:  #607888;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(14,74,88,0.08);
  --shadow-md:   0 8px 32px rgba(14,74,88,0.12);
  --shadow-lg:   0 20px 60px rgba(14,74,88,0.18);

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  --grad-green:  linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  --grad-hero:   linear-gradient(145deg, #0A2E3E 0%, #0E4A58 50%, #0D3A28 100%);

  /* Typography */
  --font-heading: 'Rubik', 'Heebo', sans-serif;
  --font-body:    'Heebo', sans-serif;

  /* Spacing */
  --radius:      12px;
  --radius-lg:   20px;
  --container:   1200px;
  --section-pad: 96px;

  /* Transitions */
  --tr-fast:     0.18s ease;
  --tr-base:     0.28s ease;
  --tr-slow:     0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-body);
  background: var(--white);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── CONTAINER ──────────────────────────────────────────────── */
.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

/* ── SECTION HEADER ─────────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-tag {
  display: inline-block;
  background: linear-gradient(135deg, rgba(26,107,124,0.1), rgba(107,191,46,0.1));
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid rgba(26,107,124,0.2);
  margin-bottom: 16px;
}

.section-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 16px;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin-inline: auto;
}

/* ── REVEAL ANIMATIONS ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s var(--tr-slow), transform 0.65s var(--tr-slow);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── RTL ICON POSITION & ORIENTATION ─────────────────────────
   Hebrew convention places action icons after the text in reading
   direction (visually on the LEFT side of the button in RTL).
   For buttons whose SVG is the first source child, row-reverse
   flips the visual order without touching the HTML. */
.btn-primary,
.btn-secondary,
.btn-download,
.nav-phone,
.mobile-phone {
  flex-direction: row-reverse;
}

/* Mirror directionally-asymmetric icons (chat bubbles, paper airplane)
   so they point in the natural Hebrew "forward" direction (left). */
.icon-rtl-mirror { transform: scaleX(-1); }

/* ── SHARED BUTTON STYLES ───────────────────────────────────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  transition: all var(--tr-base);
  white-space: nowrap;
}

.btn-primary {
  background: var(--grad-green);
  color: var(--white);
  box-shadow: 0 6px 24px rgba(107,191,46,0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(107,191,46,0.5);
  filter: brightness(1.08);
}

.btn-secondary {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  transition: background var(--tr-base), box-shadow var(--tr-base), backdrop-filter var(--tr-base);
}

.site-header.scrolled {
  background: rgba(10, 30, 50, 0.92);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 32px rgba(0,0,0,0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
  overflow: hidden;   /* clip anything that overflows the 72px bar */
}

/* Logo */
.logo-link { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }

.logo-img {
  height: 64px;       /* fills the 72px navbar with 4px breathing room top/bottom */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.logo-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.logo-text-main {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-text-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--teal-light);
  letter-spacing: 0.05em;
}

/* Desktop nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-nav a {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all var(--tr-fast);
}
.main-nav a:hover { color: var(--white); background: rgba(255,255,255,0.1); }

.nav-phone {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: var(--grad-green) !important;
  color: var(--white) !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 4px 16px rgba(107,191,46,0.3);
  transition: all var(--tr-base) !important;
}
.nav-phone:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(107,191,46,0.5) !important;
  background: rgba(255,255,255,0.15) !important;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--tr-base);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu — fully collapsed and INVISIBLE in its base state.
   Closed state has zero padding, zero border, hidden visibility, and is
   pulled fully out of the visible area, so no sliver of text can leak. */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(10,30,50,0.97);
  backdrop-filter: blur(20px);
  padding: 0;
  border-top: 0 solid rgba(255,255,255,0.08);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.4s ease, padding 0.4s ease, border-top-width 0.4s ease, visibility 0s linear 0.4s;
}
.mobile-menu.open {
  max-height: 400px;
  padding: 16px 0 24px;
  border-top-width: 1px;
  visibility: visible;
  pointer-events: auto;
  transition: max-height 0.4s ease, padding 0.4s ease, border-top-width 0.4s ease, visibility 0s linear 0s;
}

.mobile-link {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  font-size: 1.05rem;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all var(--tr-fast);
}
.mobile-link:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.mobile-phone { color: var(--green-light) !important; font-weight: 700 !important; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--grad-hero);
  display: flex;
  align-items: center;
  padding-top: 72px;
  overflow: hidden;
}

/* Background particles */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
  opacity: 0.12;
}
.p1 { width: 320px; height: 320px; background: var(--teal-light); top: -10%; right: -5%;  animation-delay: 0s; }
.p2 { width: 200px; height: 200px; background: var(--green);      bottom: 10%; left: 5%;  animation-delay: 2s; }
.p3 { width: 140px; height: 140px; background: var(--teal);       top: 30%;   left: 20%; animation-delay: 4s; }
.p4 { width: 80px;  height: 80px;  background: var(--green-light);top: 60%;   right: 30%;animation-delay: 1s; }
.p5 { width: 240px; height: 240px; background: var(--teal-dark);  bottom: -8%;right: 25%;animation-delay: 3s; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 2;
  padding-block: 80px;
  max-width: 800px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 8px 18px;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(107,191,46,0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107,191,46,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(107,191,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,191,46,0); }
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 24px;
}

.gradient-text {
  display: block;
  background: linear-gradient(135deg, var(--green-light), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.72);
  max-width: 620px;
  margin-bottom: 40px;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 56px;
}

/* Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 20px 32px;
  backdrop-filter: blur(12px);
  width: fit-content;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
}

.stat-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}

.stat-plus {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--green-light);
  vertical-align: super;
}

.stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  animation: bounce 2.5s ease-in-out infinite;
}

.scroll-mouse {
  width: 22px;
  height: 36px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-wheel {
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 100px;
  animation: scroll-wheel 2s ease-in-out infinite;
}

@keyframes scroll-wheel { 0%,100% { transform: translateY(0); opacity:1; } 50% { transform: translateY(6px); opacity:0.3; } }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }

/* ============================================================
   SERVICES GRID (shared base — extended by .services-grid-main)
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
  cursor: default;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(26,107,124,0.25);
}

.service-icon {
  font-size: 2.4rem;
  margin-bottom: 16px;
  display: block;
}

.service-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.service-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ============================================================
   DOWNLOAD SECTION
   ============================================================ */
.download-section {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.download-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 32px;
}

/* Steps side */
.download-steps {
  padding: 48px 40px;
  background: var(--off-white);
  border-left: 1px solid var(--light-grey);
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.step-num {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(26,107,124,0.3);
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-text strong {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.step-text span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Download action side */
.download-action {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  background: linear-gradient(160deg, #F0F8FC 0%, #FAFFF5 100%);
}

.rustdesk-logo {
  margin-bottom: 4px;
  filter: drop-shadow(0 8px 24px rgba(21,101,192,0.3));
}

.download-action h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-dark);
}

.download-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-green);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 18px 36px;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(107,191,46,0.4);
  transition: all var(--tr-base);
  margin-top: 8px;
}
.btn-download:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(107,191,46,0.55);
  filter: brightness(1.06);
}
.btn-download:active { transform: translateY(-1px); }

.download-os {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
}

/* Notes */
.download-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(26,107,124,0.06);
  border: 1px solid rgba(26,107,124,0.15);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.note-icon { font-size: 1.4rem; flex-shrink: 0; }

.download-note p {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
}

.security-warning {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(200, 30, 30, 0.06);
  border: 1px solid rgba(200, 30, 30, 0.2);
  border-right: 4px solid #C81E1E;
  border-radius: var(--radius);
  padding: 20px 24px;
}

.warning-icon { font-size: 1.4rem; flex-shrink: 0; }

.security-warning p {
  font-size: 0.92rem;
  color: #7A1010;
  line-height: 1.6;
}

.security-warning strong {
  font-weight: 700;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-section {
  padding: var(--section-pad) 0;
  background: var(--off-white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}

/* Info side */
.contact-info .section-tag { margin-bottom: 12px; }

.contact-info h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.contact-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 32px;
  line-height: 1.8;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
}
.contact-card:hover { transform: translateX(-4px); box-shadow: var(--shadow-md); }

.contact-card-icon {
  font-size: 1.6rem;
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}

.contact-card-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact-card-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal);
  transition: color var(--tr-fast);
}
.contact-card-value:hover { color: var(--green-dark); }

/* Hours */
.hours-block {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 4px;
  box-shadow: var(--shadow-sm);
}

.hours-block h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--light-grey);
  font-size: 0.9rem;
  color: var(--text-body);
}
.hours-row:last-child { border-bottom: none; }

.hours-time {
  font-weight: 700;
  color: var(--teal);
}

.hours-row.closed .hours-time { color: var(--mid-grey); }

/* Form */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { margin-bottom: 20px; }

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}

.req { color: #E53E3E; }

.form-group input,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--off-white);
  border: 1.5px solid var(--light-grey);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: all var(--tr-fast);
  outline: none;
  resize: vertical;
  direction: rtl;
  text-align: right;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--mid-grey);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--teal);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(26,107,124,0.12);
}

.btn-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--grad-brand);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(26,107,124,0.3);
  transition: all var(--tr-base);
  cursor: pointer;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(26,107,124,0.45); filter: brightness(1.1); }
.btn-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.form-success,
.form-error {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
}

.form-success { background: rgba(107,191,46,0.1); color: #2F6A0A; border: 1px solid rgba(107,191,46,0.3); }
.form-error   { background: rgba(200,30,30,0.08); color: #7A1010; border: 1px solid rgba(200,30,30,0.2); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--text-dark);
  color: rgba(255,255,255,0.75);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding: 64px 0 48px;
}

.footer-brand .footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1) opacity(0.8);
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.8;
  max-width: 280px;
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links h4,
.footer-contact h4 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 6px;
}

.footer-links a,
.footer-contact a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--tr-fast);
}
.footer-links a:hover,
.footer-contact a:hover { color: var(--green-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.footer-bottom p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}

.footer-security {
  color: rgba(255,200,100,0.7) !important;
  font-weight: 500 !important;
}

/* ============================================================
   FLOATING ACTION BUTTONS
   ============================================================ */
.floating-actions {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  transition: all var(--tr-base);
  color: var(--white);
}
.fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,0.35); }

.fab-phone { background: var(--grad-brand); }
.fab-wa    { background: linear-gradient(135deg, #25D366, #128C7E); }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-text .section-tag { margin-bottom: 14px; }

.about-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 20px;
}

.about-text p {
  font-size: 1.02rem;
  color: var(--text-body);
  line-height: 1.85;
  margin-bottom: 16px;
}

.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.about-badge {
  background: linear-gradient(135deg, rgba(26,107,124,0.08), rgba(107,191,46,0.08));
  border: 1px solid rgba(26,107,124,0.2);
  color: var(--teal-dark);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 100px;
}

.about-visual {
  display: flex;
  justify-content: center;
}

.about-card-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 420px;
  width: 100%;
}

.about-mini-card {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-mini-card:nth-child(odd)  { transform: translateY(-12px); }
.about-mini-card:nth-child(even) { transform: translateY(12px); }
.about-mini-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(26,107,124,0.25);
}

.about-mini-icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.about-mini-card strong {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--text-dark);
  font-size: 1rem;
}

.about-mini-card span {
  font-size: 0.82rem;
  color: var(--text-muted);
}


/* ============================================================
   SERVICES SECTION (main, larger cards)
   ============================================================ */
.services-section {
  padding: var(--section-pad) 0;
  background: var(--off-white);
}

.services-grid-main {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.service-card-lg {
  text-align: right;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
}

.service-card-lg::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: 4px;
  background: var(--grad-green);
  transform: translateX(100%);
  transition: transform var(--tr-base);
}
.service-card-lg:hover::before { transform: translateX(0); }

.service-card-lg .service-icon {
  font-size: 2.6rem;
  margin-bottom: 18px;
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background: linear-gradient(135deg, rgba(26,107,124,0.08), rgba(107,191,46,0.08));
  border-radius: 16px;
}

.service-card-lg h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.service-card-lg p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}


/* ============================================================
   WHY US SECTION
   ============================================================ */
.why-section {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.why-card {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
  position: relative;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(26,107,124,0.25);
}

.why-num {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 900;
  background: var(--grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}

.why-card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.why-card p {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.7;
}


/* ============================================================
   CLIENTS MARQUEE
   ============================================================ */
.clients-section {
  padding: var(--section-pad) 0;
  background: var(--off-white);
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
}

/*
  Infinite marquee — two-set approach:
  Two identical .marquee-content strips sit side by side inside the flex wrapper.
  Each strip animates translateX(0 → -100%) independently over the same duration.
  When strip-1 finishes its slide off-screen, strip-2 is already in strip-1's
  original position, and both reset to 0 at the same instant — invisible seam.
  padding-right on each strip equals the gap so the join between the two strips
  looks exactly like a normal inter-logo gap.
*/
.marquee {
  position: relative;
  display: flex;         /* side-by-side content strips */
  direction: ltr;        /* override page RTL so strips stack left-to-right */
  width: 100%;
  overflow: hidden;
  padding: 36px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee-content {
  display: flex;
  flex-shrink: 0;        /* never let the browser squash the strip */
  direction: ltr;        /* logos always lay out left-to-right */
  gap: 80px;
  padding-right: 80px;   /* gap between this strip's last logo and the next strip's first */
  animation: marquee-scroll 105s linear infinite;
}

.marquee:hover .marquee-content {
  animation-play-state: paused;
}

.client-logo {
  flex: 0 0 auto;
  height: 160px;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
}
.client-logo:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.client-logo img {
  max-height: 120px;
  max-width: 210px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.75);
  transition: filter var(--tr-base);
}
.client-logo:hover img {
  filter: grayscale(0%) opacity(1);
}

.client-logo span {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}


/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--grad-hero);
  color: var(--white);
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
}

.cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
}

.cta-inner h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 16px;
}

.cta-inner > p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: 36px;
  line-height: 1.8;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 28px;
}

.cta-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  font-weight: 600;
}
.cta-contact-row a {
  color: rgba(255,255,255,0.85);
  transition: color var(--tr-fast);
}
.cta-contact-row a:hover { color: var(--green-light); }


/* ============================================================
   SUPPORT PAGE
   ============================================================ */
.support-page {
  background: var(--white);
}

/* Force a solid header background on support page (no hero behind it) */
.site-header.is-solid {
  background: rgba(10, 30, 50, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 32px rgba(0,0,0,0.2);
}

.main-nav a.active {
  color: var(--green-light);
  background: rgba(107,191,46,0.12);
}

.support-hero {
  position: relative;
  background: var(--grad-hero);
  color: var(--white);
  padding: 140px 0 80px;
  overflow: hidden;
  text-align: center;
}

.support-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
}

.support-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 18px;
}

.support-hero p {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
}


/* Footer small security text */
.footer-security-mini {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-top: 10px;
}

.footer-support-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 14px;
  background: rgba(107,191,46,0.15);
  border: 1px solid rgba(107,191,46,0.35);
  border-radius: var(--radius);
  color: var(--green-light) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  width: fit-content;
}
.footer-support-btn:hover { background: rgba(107,191,46,0.25); }


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Nav hiding: covers phones, high-DPI devices, and tablets up to 1024px ── */
@media (max-width: 1024px) {
  /* Force desktop nav completely off.
     Hiding descendants too defeats inline styles set by JS (updateActiveNav)
     and the `.nav-phone { display: flex !important }` rule defined globally. */
  .main-nav,
  .main-nav *,
  .main-nav .nav-phone {
    display: none !important;
    visibility: hidden !important;
  }

  .hamburger   { display: flex !important; }
  .mobile-menu { display: flex; }

  /* Prevent a wide logo from overflowing into the hamburger space */
  .logo-link { flex-shrink: 1; overflow: hidden; }
  .logo-img  { max-width: calc(100vw - 90px); height: auto; max-height: 56px; }
}

/* ── Layout adjustments for smaller screens ── */
@media (max-width: 900px) {
  :root { --section-pad: 64px; }

  .contact-grid  { grid-template-columns: 1fr; gap: 40px; }
  .download-card { grid-template-columns: 1fr; }
  .download-steps{ border-left: none; border-top: 1px solid var(--light-grey); }
  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand  { grid-column: 1 / -1; }
  .hero-stats    { flex-wrap: wrap; justify-content: center; }

  .about-grid    { grid-template-columns: 1fr; gap: 40px; }
  .about-card-stack { max-width: 360px; margin-inline: auto; }

  /* Marquee reduced for mobile */
  .marquee-content { gap: 48px; padding-right: 48px; animation-duration: 75s; }
  .client-logo     { height: 120px; min-width: 190px; padding: 14px 20px; }
  .client-logo img { max-height: 90px; max-width: 160px; }
}

@media (max-width: 600px) {
  .form-row          { grid-template-columns: 1fr; }
  .hero-cta          { flex-direction: column; align-items: flex-start; }
  .footer-inner      { grid-template-columns: 1fr; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .contact-form-wrap { padding: 24px; }
  .download-action   { padding: 32px 24px; }
  .download-steps    { padding: 32px 24px; }
  .hero-stats        { padding: 16px 20px; }
  .stat-item         { padding: 0 16px; }
  .floating-actions  { bottom: 20px; left: 16px; }
}