/* 3Sixty6 Media – Shared styles for cohesive look */
:root {
  --bg: #0a0a0a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --glass-bg: rgba(20, 20, 20, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --brand-a: #8A2BE2;
  --brand-b: #4F46E5;
  --brand-c: #00BFFF;
}

/* Base */
/* Site-wide watermark config */
:root {
  /* Use site logo placed in assets/ (spaces allowed) */
  --logo-watermark-url: url('3sixty6 Media Logo white on no background.png');
  /* 80% transparency => 20% opacity */
  --logo-watermark-opacity: .20;
  /* Scales responsively, caps at a comfortable size */
  --logo-watermark-size: min(70vw, 680px);
}

/* Paint the solid page background on html so the body watermark can sit above it */
html { background: var(--bg); overflow-x: hidden; }

body { margin: 0; background: transparent; color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; position: relative; overflow-x: hidden; }

/* Shared content wrapper for sections */
.wrap { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 3vw, 28px); padding-right: clamp(16px, 3vw, 28px); }

/* Ensure media never causes horizontal overflow */
img, video, iframe { max-width: 100%; height: auto; }

/* Site-wide logo watermark: centered, behind all content */
body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--logo-watermark-size);
  height: var(--logo-watermark-size);
  transform: translate(-50%, -50%);
  background-image: var(--logo-watermark-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: var(--logo-watermark-opacity);
  pointer-events: none;
  /* Behind content, above html background */
  z-index: 0;
}

/* Do not show watermark when printing */
@media print { body::before { display: none !important; } }

/* Ensure normal page content paints above the watermark */
body > * { position: relative; z-index: 1; }

.gradient-text { background: linear-gradient(90deg, var(--brand-a), var(--brand-c)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.glass-card { background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); padding: clamp(14px, 2vw, 22px); border-radius: 16px; }

.section-fade-in { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.section-fade-in.visible { opacity: 1; transform: translateY(0); }

/* Buttons */
.btn, .site-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 800; border-radius: 9999px; padding: .7rem 1.1rem; text-decoration: none; border: 1px solid transparent; }
.btn-primary, .site-cta { color: #fff; background-image: linear-gradient(to right, var(--brand-a) 0%, var(--brand-b) 51%, var(--brand-c) 100%); background-size: 200% auto; transition: background-position .35s ease, transform .15s ease; }
.btn-primary:hover, .site-cta:hover { background-position: right center; transform: translateY(-1px); }
.btn-secondary { color: var(--text); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.btn-secondary:hover { background: rgba(255,255,255,0.14); }

/* Button variants for landing page action areas */
.btn-outline { color: var(--text); background: transparent; border-color: rgba(255,255,255,.35); }
.btn-outline:hover { background: rgba(255,255,255,.08); }
.btn-xl { padding: 1rem 1.15rem; font-size: 1rem; min-height: 52px; border-radius: 14px; }

/* Compact, balanced CTA grids */
.cta-actions { display: grid; gap: .6rem; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cta-actions.stack { grid-template-columns: 1fr; }
.cta-actions .btn, .cta-actions .site-cta { width: 100%; justify-content: center; white-space: normal; text-align: center; }

/* Generic CTA rows used on sales pages */
.cta-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.cta-row .site-cta, .cta-row .btn-secondary, .cta-row .btn { flex: 1 1 180px; min-height: 48px; border-radius: 12px; justify-content: center; }

/* Info rows in final CTAs */
.info-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }
.info-card { border-radius: 16px; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); text-align: left; }
.info-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.info-value { font-size: 1.15rem; font-weight: 900; margin-top: .2rem; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10000; background: rgba(10,10,10,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-border); }
.site-header__inner { max-width: 1120px; margin: 0 auto; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-weight: 900; letter-spacing: .5px; color: var(--text); text-decoration: none; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .5rem; }
.brand .accent { background: linear-gradient(90deg, var(--brand-a), var(--brand-c)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.site-nav { display: none; align-items: center; gap: 1rem; }
.site-nav a { color: var(--text); opacity: .85; text-decoration: none; font-weight: 600; transition: color .2s, opacity .2s; }
.site-nav a:hover { color: #67E8F9; opacity: 1; }
@media (min-width: 768px) { .site-nav { display: flex; } }

/* Dropdown menus (desktop) */
.nav-group { display: flex; align-items: center; gap: 1rem; }
.dropdown { position: relative; }
.dropdown-toggle { background: transparent; color: var(--text); opacity: .9; font-weight: 700; border: 0; cursor: pointer; padding: .35rem .4rem; display: inline-flex; align-items: center; gap: .35rem; }
.dropdown-toggle:hover { color: #67E8F9; opacity: 1; }
.dropdown-toggle::after { content: "▾"; font-size: .85em; opacity: .8; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: rgba(20,20,20,.96); border: 1px solid var(--glass-border); border-radius: 12px; padding: .5rem; display: none; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.dropdown-menu a { display: block; padding: .5rem .65rem; border-radius: 8px; opacity: .9; }
.dropdown-menu a small { display:block; color: var(--muted); font-weight: 500; margin-top: 2px; }
.dropdown-menu a:hover { background: rgba(255,255,255,.06); opacity: 1; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; }

/* Mobile behavior: when overlay menu is open, show dropdowns expanded */
@media (max-width: 767.98px) {
  .site-header.menu-open .site-nav .dropdown { width: 100%; }
  .site-header.menu-open .site-nav .dropdown-menu { position: static; display: block; background: transparent; border: 0; box-shadow: none; padding: 0; margin-left: .5rem; }
  .site-header.menu-open .site-nav .dropdown-toggle::after { display: none; }
}

/* Header logo added before brand text */
.site-header .brand::before {
  content: "";
  width: 28px;
  height: 28px;
  background-image: var(--logo-watermark-url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,.5));
}
@media (min-width: 768px) {
  .site-header .brand::before { width: 32px; height: 32px; }
}

/* Mobile menu button */
.site-menu { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; color: var(--text); background: transparent; border: 1px solid var(--glass-border); border-radius: 10px; padding: .45rem .6rem; cursor: pointer; min-width: 44px; min-height: 40px; -webkit-tap-highlight-color: transparent; position: relative; z-index: 10002; }
.site-menu:focus { outline: 2px solid #67E8F9; outline-offset: 2px; }
.site-menu .bar { position: relative; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: background .2s ease; }
.site-menu .bar::before, .site-menu .bar::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, top .2s ease, background .2s ease; }
.site-menu .bar::before { top: -6px; }
.site-menu .bar::after { top: 6px; }
/* Animate hamburger into an "X" when menu is open */
.site-header.menu-open .site-menu .bar { background: transparent; }
.site-header.menu-open .site-menu .bar::before { top: 0; transform: rotate(45deg); }
.site-header.menu-open .site-menu .bar::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 768px) { .site-menu { display: none; } }

/* Mobile nav overlay */
@media (max-width: 767.98px) {
  /* Avoid iOS/WebKit fixed-position quirks with backdrop-filter by disabling it when open */
  .site-header.menu-open { background: rgba(10,10,10,0.96); -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 10000; }
  /* Ensure the mobile menu overlay sits above CTA and content */
  .site-header.menu-open .site-nav { display: flex; position: fixed; left: 0; right: 0; top: var(--header-h, 56px); bottom: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: rgba(10,10,10,0.96); padding: 0; border-top: 1px solid var(--glass-border); overflow-y: auto; z-index: 10001; width: 100%; box-sizing: border-box; transform: translateZ(0); }
  .site-header.menu-open .site-nav a { display: block; width: 100%; padding: .9rem .9rem; font-size: 1.1rem; color: var(--text); opacity: 1; border-bottom: 1px solid rgba(255,255,255,.08); }
  .site-header.menu-open .site-nav a:last-child { border-bottom: 0; }
  /* Hide only the header's top-right CTA on small screens to avoid overlap */
  .site-header .site-cta { display: none; }
  .site-header__inner { gap: .5rem; }
  .site-nav a { padding: .65rem .25rem; font-size: 1.05rem; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--glass-border); }
.site-footer__inner { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--muted); }
/* Respect iOS safe-area on small screens */
@supports (padding: max(0px)) {
  .site-footer__inner { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; width: 100%; }
.site-footer__nav a { color: var(--muted); text-decoration: none; padding: .25rem .5rem; }
.site-footer__nav a:hover { color: var(--text); }

/* Mobile: stack footer links vertically */
@media (max-width: 767.98px) {
  .site-footer__nav { flex-direction: column; align-items: center; gap: .35rem; }
  .site-footer__nav a { display: block; padding: .4rem 0; }
}

/* Footer logo added above links */
.site-footer__inner::before {
  content: "";
  width: 36px;
  height: 36px;
  background-image: var(--logo-watermark-url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  opacity: .9;
}

/* ROI Modal */
.roi-overlay { position: fixed; inset: 0; z-index: 100; display: none; }
.roi-overlay[aria-hidden="false"] { display: block; }
.roi-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.roi-modal { position: relative; z-index: 101; max-width: 720px; width: min(92vw, 720px); margin: 5vh auto; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.25rem; color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.5); max-height: calc(100vh - 10vh); overflow: auto; }
.roi-modal header h2 { margin: 0; font-size: 1.5rem; font-weight: 900; }
.roi-sub { color: var(--muted); margin-top: .25rem; font-size: .95rem; }
.roi-close { position: absolute; top: .6rem; right: .6rem; background: transparent; border: 0; color: var(--text); font-size: 1.5rem; cursor: pointer; opacity: .8; }
.roi-close:hover { opacity: 1; }
.roi-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1rem; }
@media (min-width: 640px) { .roi-grid.two { grid-template-columns: repeat(2, 1fr); } }
.roi-field { display: grid; gap: .35rem; }
.roi-field label { font-weight: 700; font-size: .95rem; }
.roi-input { width: 100%; padding: .7rem .8rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: var(--text); }
.roi-kpis { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: .75rem; }
@media (min-width: 640px) { .roi-kpis { grid-template-columns: repeat(3, 1fr); } }
.roi-kpi { border: 1px dashed rgba(255,255,255,.18); border-radius: 12px; padding: .75rem; background: rgba(255,255,255,.03); }
.roi-kpi .label { color: var(--muted); font-size: .9rem; }
.roi-kpi .val { font-weight: 900; font-size: 1.35rem; margin-top: .2rem; }
.roi-cta { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1rem; }
.roi-cta .site-cta, .roi-cta .btn-secondary { padding: .7rem 1rem; border-radius: 12px; }

/* Global section centering (scope to site pages) */
body.antialiased main section { text-align: center; }
body.antialiased main section .wrap,
body.antialiased main section .container,
body.antialiased main section .fallback-container { margin-left: auto; margin-right: auto; }
/* Preserve table readability */
body.antialiased main section table th,
body.antialiased main section table td { text-align: left; }

/* Small utilities (externalize inline styles) */
.span-all { grid-column: 1 / -1; }
.text-brand { color: var(--brand-c); }
.border-brand-left { border-left: 4px solid var(--brand-c); }
.ml-05 { margin-left: .5rem; }
.text-sky-300 { color: #93C5FD; }
.ns-gtm { display: none; visibility: hidden; width: 0; height: 0; }
.text-shadow { text-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* Subtle hero background orbs for visual depth */
.hero-orbs { position: absolute; inset: 0; opacity: .28; z-index: 0; }
.hero-orbs .orb { position: absolute; border-radius: 9999px; filter: blur(42px); transform: translateZ(0); will-change: transform, opacity; }
.hero-orbs .orb.purple { background: radial-gradient(closest-side, rgba(138,43,226,.9), rgba(138,43,226,0) 70%); width: 22rem; height: 22rem; left: 18%; top: 18%; animation: orb-float 14s ease-in-out infinite; }
.hero-orbs .orb.cyan { background: radial-gradient(closest-side, rgba(0,191,255,.9), rgba(0,191,255,0) 70%); width: 24rem; height: 24rem; right: 14%; top: 38%; animation: orb-float 16s ease-in-out -3s infinite; }
@keyframes orb-float { 0%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-14px) scale(1.04);} 100%{ transform: translateY(0) scale(1);} }

/* Entrance pop for cards when section-fade-in becomes visible */
.card-pop { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
.section-fade-in.visible .card-pop { opacity: 1; transform: translateY(0) scale(1); }

/* Slight lift on hover for CTAs */
.lift:hover { transform: translateY(-2px); }

/* Gradient background helpers (externalized from inline styles) */
.bg-grad-soft-red { background: linear-gradient(180deg, rgba(255,107,107,.22), rgba(0,0,0,.22)); }
.bg-grad-soft-yellow { background: linear-gradient(180deg, rgba(255,209,102,.22), rgba(0,0,0,.22)); }
.bg-grad-soft-teal { background: linear-gradient(180deg, rgba(17,138,178,.22), rgba(0,0,0,.22)); }
.bg-grad-soft-navy { background: linear-gradient(180deg, rgba(7,59,76,.22), rgba(0,0,0,.22)); }

/* Sales page shared bits */
.pill{ display:inline-block; font-size:.8rem; padding:.25rem .6rem; border:1px solid var(--glass-border); border-radius:999px; background: rgba(255,255,255,.06); color: var(--text); }
.feat{ display:grid; gap:.5rem; margin:.5rem 0 0 }
.feat li{ list-style:none; display:flex; gap:.5rem; align-items:flex-start; color:var(--text); opacity:.9 }
.feat li::before{ content:"✓"; color:#22c55e; font-weight:900; margin-top:2px }
.price{ font-weight:900; font-size: clamp(26px, 3.5vw, 36px) }

/* Inline-style replacements (utilities) */
.center-col { display: flex; justify-content: center; flex-direction: column; text-align: center; }
.text-center { text-align: center; }
.text-inherit { text-align: inherit; }
.justify-center { justify-content: center; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.gap-035 { gap: .35rem; }
.gap-06 { gap: .6rem; }
.gap-05 { gap: .5rem; }
.gap-075 { gap: .75rem; }
.m-0 { margin: 0; }
.mt-05 { margin-top: .5rem; }
.mt-035 { margin-top: .35rem; }
.mt-06 { margin-top: .6rem; }
.mt-075 { margin-top: .75rem; }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.my-025 { margin: .25rem 0; }
.mt-025 { margin-top: .25rem; }
.my-125-15 { margin: 1.25rem 0 1.5rem; }
.mb-125 { margin-bottom: 1.25rem; }
.mb-4 { margin-bottom: 4rem; }
.pt-125 { padding-top: 1.25rem; }
.pb-125 { padding-bottom: 1.25rem; }
.p-1 { padding: 1rem; }
.p-08 { padding: .8rem; }
.mt-085 { margin-top: .85rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-720 { max-width: 720px; }
.pad-1-1-125 { padding: 1rem 1rem 1.25rem; }
.overflow-auto { overflow: auto; }
.block { display: block; }
.hidden { display: none !important; }
.grid { display: grid; }
.row-flex { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.items-end { align-items: flex-end; }
.w-full { width: 100%; }
.justify-between { justify-content: space-between; }
.text-right { text-align: right; }
.pb-2 { padding-bottom: 2rem; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.two-col { grid-template-columns: 1fr 1fr; }
.minh-125 { min-height: 1.25rem; }

/* CTA rows: full-width buttons on small screens */
.cta-row { display: flex; gap: .5rem; }
@media (max-width: 640px) {
  .cta-row .site-cta,
  .cta-row .btn-secondary { width: 100%; }
}