.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-astglobalcolor4:#05070A;--e-global-color-astglobalcolor5:#05070A;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//**
 * RAMS Studio — Elite Minimal Design System v5.0
 * Art Direction: Near-black depth, surgical whitespace, asymmetrical authority
 * Apple/ANODA inspired — no gimmicks, no blobs
 * Sync: Elementor > Site Settings > Custom CSS + Appearance > Additional CSS
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --rams-bg:          #05070A;
  --rams-bg-end:      #0B0C10;
  --rams-cyan:        #66FCF1;
  --rams-blue:        #007AFF;
  --rams-white:       #FFFFFF;
  --rams-text:        #FFFFFF;
  --rams-border:      rgba(255,255,255,0.07);
  --rams-header-h:    72px;
  --rams-ease:        cubic-bezier(0.16, 1, 0.3, 1);

  /* Elementor global tokens */
  --e-global-color-primary:   #007AFF;
  --e-global-color-secondary: #FFFFFF;
  --e-global-color-text:      #FFFFFF;
  --e-global-color-accent:    #05070A;

  /* Typography */
  --rams-font-display: "Heebo", sans-serif;
  --rams-font-body:    "Assistant", sans-serif;
}

/* ============================================================
   1b. OVERRIDE ELEMENTOR KIT DEFAULT COLORS
   (kit-6 scope is more specific than :root — must override explicitly)
   ============================================================ */
.elementor-kit-6 {
  --e-global-color-primary:   #007AFF !important;
  --e-global-color-secondary: #FFFFFF !important;
  --e-global-color-text:      #FFFFFF !important;
  --e-global-color-accent:    #05070A !important;
}

/* ============================================================
   GLOBAL TEXT — FORCE WHITE EVERYWHERE
   ============================================================ */
body,
body p,
body span,
body div,
body li,
body a,
body label,
body td,
body th,
body blockquote,
body figcaption,
body small,
body strong,
body em,
body address,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span,
.elementor-widget-text-editor li,
.elementor-widget-text-editor div,
.elementor-text-editor,
.elementor-text-editor p,
.elementor-text-editor span,
.elementor-text-editor li,
.elementor-widget-heading .elementor-heading-title,
.elementor-icon-box-description,
.elementor-icon-box-title,
.elementor-image-box-description,
.elementor-image-box-title,
.elementor-counter-number-wrapper,
.elementor-counter-title,
.e-con p,
.e-con span,
.e-con li,
.e-con div,
.e-con a:not(.elementor-button),
.elementor-section p,
.elementor-section span,
.elementor-section li,
.elementor-section a:not(.elementor-button),
footer p,
footer span,
footer div,
footer li,
footer a,
.site-footer *,
[class*="footer"] p,
[class*="footer"] span,
[class*="footer"] a,
[class*="footer"] li {
  color: #FFFFFF !important;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Force deep near-black background — overrides Astra */
html,
body,
.elementor-page,
#page,
.site,
.ast-container {
  background: #05070A !important;
  background-color: #05070A !important;
}

body {
  color: var(--rams-text);
  font-family: var(--rams-font-body);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ============================================================
   3. GRAIN TEXTURE — subtle film grain
   ============================================================ */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

/* ============================================================
   4. HEADER
   ============================================================ */
.rams-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: var(--rams-header-h) !important;
  background: rgba(5,7,10,0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  direction: ltr;
}
.rams-header > .e-con-inner {
  height: 100%;
  display: flex !important;
  align-items: center !important;
}

.rams-logo {
  font-family: var(--rams-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}

.rams-nav-link {
  font-family: var(--rams-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}
.rams-nav-link:hover { color: #FFFFFF; }

.rams-header-cta {
  font-family: var(--rams-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 40px;
  padding: 8px 22px;
  background: transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
  text-decoration: none;
  white-space: nowrap;
}
.rams-header-cta:hover {
  border-color: rgba(255,255,255,0.5);
  color: #FFFFFF;
}

/* ============================================================
   5. HERO
   ============================================================ */
.rams-hero {
  min-height: calc(100vh - var(--rams-header-h));
  display: flex !important;
  align-items: center !important;
  position: relative;
  overflow: hidden;
}
.rams-hero > .e-con-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ============================================================
   6. TYPOGRAPHY
   ============================================================ */
h1.elementor-heading-title {
  font-family: var(--rams-font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(52px, 6.5vw, 90px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
}

h2.elementor-heading-title {
  font-family: var(--rams-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #FFFFFF !important;
}

h3.elementor-heading-title {
  font-family: var(--rams-font-display) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

/* ============================================================
   7. CTA BUTTON
   ============================================================ */
.elementor-widget-button .elementor-button {
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.35s var(--rams-ease) !important;
  will-change: transform;
}

/* ============================================================
   8. TRUST BAR
   ============================================================ */
.rams-trust-item {
  font-family: var(--rams-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  filter: grayscale(100%);
  opacity: 0.4;
  transition: opacity 0.3s ease;
  cursor: default;
  user-select: none;
}
.rams-trust-item:hover { opacity: 0.65; }

/* ============================================================
   9. GLASS CARD (for future sections)
   ============================================================ */
.rams-glass-card {
  background: rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--rams-ease), box-shadow 0.5s ease, border-color 0.4s ease !important;
}
.rams-glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  pointer-events: none;
}
.rams-glass-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ============================================================
   10. ENTRANCE ANIMATIONS
   ============================================================ */
@keyframes rams-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rams-fade         { animation: rams-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.rams-fade.d1      { animation-delay: 0.10s; }
.rams-fade.d2      { animation-delay: 0.22s; }
.rams-fade.d3      { animation-delay: 0.36s; }
.rams-fade.d4      { animation-delay: 0.50s; }

/* ============================================================
   11. SECTION SEPARATOR
   ============================================================ */
.rams-sep {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.06) 70%, transparent 100%);
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .rams-hero > .e-con-inner { gap: 40px !important; }
}
@media (max-width: 767px) {
  h1.elementor-heading-title {
    font-size: clamp(38px, 10vw, 52px) !important;
    letter-spacing: -0.02em !important;
  }
}

/* ============================================================
   IMPORT NOTES
   Step 1 → Elementor > Site Settings > Custom CSS → paste file
   Step 2 → Global Colors: Primary=#007AFF, Secondary=#FFFFFF, Text=rgba(255,255,255,0.55), Accent=#05070A
   Step 3 → Global Fonts: Heebo 900 (display), Assistant 400/600 (body)
   Step 4 → Appearance > Customize > Additional CSS → same file
   ============================================================ */

#rams-global-header .sr-dropdown a{direction:rtl!important;color:rgba(255,255,255,0.68)!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;padding:10px 14px!important;text-decoration:none!important;border-radius:10px!important;width:100%!important;}
/* Hide Astra default header — replaced by custom Elementor nav */
#masthead,#masthead *{display:none!important;}/* End custom CSS */