/*
Theme Name: R2M Astra Child
Theme URI: https://route2marketsolutions.com
Description: Astra child theme with a dark R2M commerce/SaaS look inspired by the supplied mockup.
Author: Route 2 Market Solutions
Template: astra
Version: 1.0.0
Text Domain: r2m-astra-child
*/

:root {
/*  --r2m-black: #020202;*/
  --r2m-black: #000000;
  --r2m-panel: #0b0b0d;
  --r2m-panel-2: #111114;
  --r2m-line: rgba(255,255,255,.13);
  --r2m-text: #ffffff;
  --r2m-muted: #a9a9a9;
  --r2m-orange: #ff7900;
  --r2m-orange-2: #ff9b2f;
}
@media (min-width: 993px) {
  .ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
    margin: 0 0 4em 0 !important;
  }
}

html { scroll-behavior: smooth; }
body.r2m-dark-site,
body.r2m-dark-site .site,
body.r2m-dark-site .site-content {
  background: var(--r2m-black);
  color: var(--r2m-text);
}
.white-text-links,
.white-text-links a {
	color: #ffffff;
}
.ast-single-post .entry-content a { text-decoration: none !important; }
.elementor-273 > .elementor-element  { justify-content: center;  }
.elementor-273 .elementor-icon-list-items svg { fill: none !important;}

.r2m-page {
  background:
    radial-gradient(circle at 62% 8%, rgba(255,121,0,.18), transparent 25%),
    radial-gradient(circle at 12% 30%, rgba(255,121,0,.07), transparent 24%),
    linear-gradient(180deg, #000 0%, #050505 45%, #000 100%);
  color: var(--r2m-text);
  font-family: "Roboto",Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

.r2m-container { width: min(1180px, calc(100% - 42px)); margin: 0 auto; }
.r2m-section { padding: 58px 0; border-top: 1px solid var(--r2m-line); }
.r2m-section-title { text-align:center; margin: 0 0 28px; font-size: clamp(26px, 3vw, 40px); }
.r2m-accent { color: var(--r2m-orange); }

.r2m-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.76); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.r2m-nav { height: 82px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.r2m-logo { color:#fff; text-decoration:none; line-height:1; display:inline-flex; flex-direction:column; font-weight:900; letter-spacing:-.07em; }
.r2m-logo-mark { font-size: 42px; }
.r2m-logo-mark span { color: var(--r2m-orange); }
.r2m-logo small { font-size:8px; letter-spacing:.16em; color:#fff; margin-top:2px; }
.r2m-menu { display:flex; align-items:center; gap:28px; margin:0; padding:0; list-style:none; }
.r2m-menu a { color:#fff; text-decoration:none; font-size:14px; opacity:.9; }
.r2m-menu a:hover { color: var(--r2m-orange); }
.r2m-button, .r2m-button-outline {
  display:inline-flex; align-items:center; gap:10px; border-radius:3px; padding: 14px 22px;
  font-weight:700; text-decoration:none; transition:.25s ease; font-size:14px;
}
.r2m-button { background: var(--r2m-orange); color:#fff; box-shadow:0 0 25px rgba(255,121,0,.26); }
.r2m-button:hover { transform: translateY(-2px); filter:brightness(1.08); color:#fff; }
.r2m-button-outline { border:1px solid rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.03); }
.r2m-button-outline:hover { border-color: var(--r2m-orange); color:var(--r2m-orange); }

.r2m-hero { min-height: 720px; display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; padding: 70px 0 40px; }
.r2m-kicker { color: var(--r2m-orange); text-transform:uppercase; letter-spacing:.22em; font-size:12px; font-weight:700; }
.r2m-hero h1 { font-size: clamp(58px, 7.6vw, 105px); line-height:.92; letter-spacing:-.06em; margin: 18px 0 24px; color:#fff; }
.r2m-hero p { max-width: 500px; color: var(--r2m-muted); font-size:18px; line-height:1.6; }
.r2m-hero-actions { display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

.r2m-flow-visual { position:relative; min-height: 520px; display:grid; place-items:center; }
.r2m-flow-visual:before {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,121,0,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,121,0,.13) 1px, transparent 1px);
  background-size: 44px 44px; transform: perspective(420px) rotateX(62deg) translateY(90px); opacity:.28;
}
.r2m-world { position:absolute; inset:0; opacity:.45; background: radial-gradient(circle at 50% 44%, rgba(255,121,0,.8) 0 2px, transparent 3px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 73%); }
.r2m-flow-stack { position:relative; display:grid; gap:18px; width:min(330px, 90%); }
.r2m-flow-item { border:1px solid rgba(255,121,0,.85); background:rgba(8,8,9,.88); border-radius:10px; padding:18px 24px; color:#fff; font-weight:800; box-shadow:0 0 34px rgba(255,121,0,.2); display:flex; align-items:center; gap:14px; }
.r2m-flow-item svg { width:28px; color:var(--r2m-orange); }
.r2m-flow-item:not(:last-child):after { content:"↓"; color:var(--r2m-orange); position:absolute; left:50%; transform: translate(-50%, 39px); }

.r2m-card-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.r2m-card { background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); border:1px solid var(--r2m-line); border-radius:10px; padding:26px 22px; min-height: 210px; transition:.25s ease; }
.r2m-card:hover { transform: translateY(-6px); border-color:rgba(255,121,0,.65); box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 26px rgba(255,121,0,.14); }
.r2m-card svg, .r2m-icon { width:38px; height:38px; color:var(--r2m-orange); margin-bottom:18px; }
.r2m-card h3 { color:#fff; font-size:18px; line-height:1.15; margin:0 0 12px; }
.r2m-card p { color:var(--r2m-muted); font-size:14px; margin:0 0 18px; }
.r2m-arrow { color:var(--r2m-orange); font-size:22px; }

.r2m-industry-row { display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; }
.r2m-industry { display:flex; align-items:center; gap:12px; padding:12px 18px; color:#fff; }
.r2m-industry + .r2m-industry { border-left:1px solid rgba(255,121,0,.55); }
.r2m-industry svg { width:30px; color:var(--r2m-orange); }

.r2m-process { display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; position:relative; }
.r2m-step { text-align:center; position:relative; }
.r2m-step-icon { width:90px; height:90px; border:1px solid rgba(255,121,0,.75); border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; box-shadow:0 0 26px rgba(255,121,0,.18); }
.r2m-step-icon svg { width:38px; color:var(--r2m-orange); }
.r2m-step b { color:var(--r2m-orange); font-size:30px; margin-right:7px; }
.r2m-step p { color:var(--r2m-muted); font-size:14px; margin:8px auto 0; max-width:140px; }

.r2m-platforms { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.r2m-platform { background:var(--r2m-panel); border:1px solid var(--r2m-line); border-radius:14px; overflow:hidden; }
.r2m-screen { aspect-ratio: 16/10; background:linear-gradient(135deg, #15161a, #070707); padding:18px; position:relative; }
.r2m-browser { height:100%; border-radius:8px; border:1px solid rgba(255,255,255,.16); background:#f8f8f8; overflow:hidden; color:#111; }
.r2m-browser-bar { height:24px; background:#111827; display:flex; gap:5px; align-items:center; padding:0 8px; }
.r2m-dot { width:7px; height:7px; border-radius:50%; background:var(--r2m-orange); opacity:.85; }
.r2m-ui { display:grid; grid-template-columns:70px 1fr; height:calc(100% - 24px); font-size:9px; }
.r2m-sidebar { background:#151923; color:#fff; padding:10px 7px; }
.r2m-main-ui { padding:10px; background:#f4f5f7; }
.r2m-chart { height:42px; background:linear-gradient(90deg, rgba(255,121,0,.2), rgba(255,121,0,.65)); border-radius:6px; margin:8px 0; }
.r2m-ui-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.r2m-ui-box { height:30px; border-radius:5px; background:#fff; border:1px solid #ddd; }
.r2m-platform-body { padding:18px; }
.r2m-platform h3 { color:#fff; margin:0 0 8px; }
.r2m-platform p { color:var(--r2m-muted); margin:0; font-size:14px; }

.r2m-integrations { display:grid; grid-template-columns: 1fr 220px 1fr; gap:30px; align-items:center; }
.r2m-integration-list { display:grid; gap:16px; }
.r2m-pill { border:1px solid var(--r2m-line); background:#090909; border-radius:999px; padding:14px 18px; color:#fff; display:flex; align-items:center; gap:10px; }
.r2m-pill span { color:var(--r2m-orange); }
.r2m-hub { width:220px; height:220px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; margin:auto; background:radial-gradient(circle, #1a1a1c, #050505); box-shadow:0 0 50px rgba(255,121,0,.16); }
.r2m-hub strong { font-size:44px; letter-spacing:-.07em; }.r2m-hub strong span { color:var(--r2m-orange); }

.r2m-stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--r2m-line); border-radius:10px; overflow:hidden; }
.r2m-stat { padding:24px; display:flex; align-items:center; gap:16px; }
.r2m-stat + .r2m-stat { border-left:1px solid var(--r2m-line); }
.r2m-stat strong { color:var(--r2m-orange); font-size:42px; line-height:1; display:block; }
.r2m-stat small { color:#fff; }

.r2m-case-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.r2m-case { background:var(--r2m-panel); border:1px solid var(--r2m-line); border-radius:12px; overflow:hidden; }
.r2m-case-img { height:145px; background:linear-gradient(135deg, rgba(255,121,0,.2), rgba(255,255,255,.08)); position:relative; }
.r2m-case-img:after { content:""; position:absolute; inset:16px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:radial-gradient(circle at 25% 40%, rgba(255,121,0,.5), transparent 25%), linear-gradient(135deg, rgba(255,255,255,.14), transparent); }
.r2m-case-body { padding:18px; }
.r2m-case h3 { color:#fff; font-size:16px; margin:0 0 8px; }
.r2m-case p { color:var(--r2m-muted); font-size:13px; margin:0 0 14px; }
.r2m-case strong { color:var(--r2m-orange); font-size:28px; display:block; }

.r2m-footer { background:#020202; border-top:1px solid var(--r2m-line); padding:54px 0 24px; }
.r2m-footer-grid { display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1fr; gap:38px; }
.r2m-footer h4 { color:#fff; margin:0 0 16px; }
.r2m-footer p, .r2m-footer a { color:var(--r2m-muted); text-decoration:none; font-size:14px; }
.r2m-footer a:hover { color:var(--r2m-orange); }
.r2m-footer-bottom { border-top:1px solid var(--r2m-line); margin-top:36px; padding-top:18px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:var(--r2m-muted); font-size:13px; }

@media (max-width: 1024px) {
  .r2m-menu { display:none; }
  .r2m-hero { grid-template-columns:1fr; min-height:auto; }
  .r2m-card-grid, .r2m-case-grid { grid-template-columns:repeat(2,1fr); }
  .r2m-platforms { grid-template-columns:1fr; }
  .r2m-integrations { grid-template-columns:1fr; }
  .r2m-stats { grid-template-columns:repeat(2,1fr); }
  .r2m-stat + .r2m-stat { border-left:0; border-top:1px solid var(--r2m-line); }
}
@media (max-width: 640px) {
  .r2m-container { width:min(100% - 28px, 1180px); }
  .r2m-hero h1 { font-size:56px; }
  .r2m-card-grid, .r2m-process, .r2m-case-grid, .r2m-stats, .r2m-footer-grid { grid-template-columns:1fr; }
  .r2m-nav { height:72px; }
  .r2m-flow-visual { min-height:420px; }
}



/* contact form popup */
.pum-overlay {
  background: rgba(0,0,0,0.82) !important;
  backdrop-filter: blur(6px);
}

.pum-container {
  background: #050505 !important;
  border: 1px solid rgba(255,121,0,0.35) !important;
  border-radius: 26px !important;
  box-shadow: 0 0 40px rgba(255,121,0,0.22) !important;
  padding: 34px !important;
}
.pum-title {
  color: #fff !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em;
}

.r2m-contact-form label {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.r2m-contact-form input,
.r2m-contact-form select,
.r2m-contact-form textarea {
  width: 100%;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  color: #fff !important;
  padding: 14px 16px !important;
  margin-top: 7px;
}

.r2m-contact-form textarea {
  min-height: 130px;
}

.r2m-form-row,
.r2m-form-row p {
  margin-bottom: 5px;
}

.r2m-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.r2m-contact-form input[type="submit"],
.r2m-contact-form .wpcf7-submit {
  background: #ff7900 !important;
  border-color: #ff7900 !important;
  color: #000 !important;
  font-weight: 800;
  border-radius: 999px !important;
  cursor: pointer;
}

.r2m-contact-form input[type="submit"]:hover,
.r2m-contact-form .wpcf7-submit:hover {
  box-shadow: 0 0 28px rgba(255,121,0,0.45);
}

@media (max-width: 640px) {
  .pum-container {
    width: calc(100% - 24px) !important;
    padding: 24px !important;
  }

  .r2m-form-grid {
    grid-template-columns: 1fr;
  }
}