/* AdSyntra AI · September 2026
   Palette, typography and shape system adapted from the supplied guidelines.
   Uploaded artwork is displayed without distortion or added logo effects. */
@import url('/assets/css/poppins-local.css?v=20260914');

:root {
  color-scheme: dark;
  --violet: #6c63ff;
  --violet-d: #5548e0;
  --lavender: #a78bfa;
  --sky: #38bdf8;
  --sky-ink: #38bdf8;
  --emerald: #34d399;
  --emerald-ink: #34d399;
  --amber: #f59e0b;
  --amber-ink: #fbbf24;
  --bg: #08090d;
  --bg-alt: #0e1018;
  --bg-deep: #13151f;
  --bg-surf: #181b27;
  --bg-raised: #1e2130;
  --text: #f0f2ff;
  --text2: #9ba3c4;
  /* Small readable copy uses secondary; tertiary is reserved for decoration. */
  --text3: #9ba3c4;
  --brand-text-tertiary: #5c6485;
  --border: rgba(108,99,255,.28);
  --border2: rgba(240,242,255,.1);
  --shadow-ink: 0,0,0;
  --ff: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --aix-ink: var(--text);
  --aix-violet: var(--lavender);
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--ff); }
button,input,select,textarea { font-family: inherit; }
::selection { color: #fff; background: #5548e0; }
h1,h2 { font-weight: 800; }
h3 { font-weight: 700; }
:where(.page-hero,.hero,.fr-hero,.lj-hero) h1 {
  font-size: clamp(2.25rem,4.6vw,3.875rem);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.035em;
}
.section-head h2,.fr-section-head h2 { font-size: clamp(2rem,3.5vw,2.75rem); }
.hero-sub,.fr-lead { font-size: 1.125rem; line-height: 1.7; }
.section-eyebrow,.fr-kicker,.nav-mega-title { color: var(--lavender); }
h1 em,.gradient-text,.lj-gradient-text { background-image: linear-gradient(135deg,#a78bfa,#38bdf8); }

/* The new symbol remains readable at navigation size. */
nav#navbar,nav#navbar.scrolled,.fr-nav {
  background: rgba(8,9,13,.94);
  border-bottom: 1px solid var(--border2);
}
nav#navbar.scrolled { box-shadow: 0 12px 36px rgba(0,0,0,.24); }
.nav-logo { gap: 10px; white-space: nowrap; }
.nav-logo span { background-image: linear-gradient(135deg,#a78bfa,#38bdf8); }
.logo-anim-wrap { width: 44px; height: 44px; }
.logo-anim-ring,.footer-logo-ring { display: block; }
.logo-anim-ring { animation: brandLogoRingSpin 3s linear infinite; }
.footer-logo-ring,.site-shared-footer .footer-logo-ring { animation: brandLogoRingSpin 5s linear infinite; }
@keyframes brandLogoRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.logo-anim-inner { inset: 2px; background: #08090d; border-radius: 10px; }
.footer-logo-inner,.site-shared-footer .footer-logo-inner { inset: 2px; background: #08090d; border-radius: 8px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.footer-logo span { white-space: nowrap; }
.footer-logo-inner img,.site-shared-footer .footer-logo-inner img { object-fit: contain; object-position: center; }
.logo-anim-inner img,.footer-logo-inner img,.nav-logo-icon img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.fr-logo img { box-shadow: none; }
.nav-resource-link { color: var(--lavender)!important; }
.nav-dropdown-panel,.mobile-nav,.fr-mobile { background: #13151f; }
.nav-dropdown-panel::before { background: #13151f; }
.nav-dropdown-panel a:hover { background: #1e2130; }
.mobile-nav:not(.open) { visibility: hidden; pointer-events: none; }
.mobile-nav.open { visibility: visible; pointer-events: auto; }
.mobile-nav a { color: var(--text2); }
.mobile-nav .btn-violet { color: #fff; }
.hamburger { min-width: 44px; min-height: 44px; }

/* Primary actions follow the supplied violet gradient and 8px corner radius. */
.btn-primary,.btn-violet,.btn-calc,.btn-price-solid,.popup-cta,.ac-cta,
.btn.primary,.fr-btn,.fr-submit,.lj-primary,.alc-next,.alc-submit {
  border-radius: 8px;
  background: linear-gradient(135deg,#6c63ff,#8b5cf6);
  color: #fff;
}
.btn-outline,.btn-ghost,.btn.secondary,.fr-btn-outline,.lj-secondary {
  border-radius: 8px;
  border-color: rgba(240,242,255,.22);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover,.btn-ghost:hover,.btn.secondary:hover,.fr-btn-outline:hover,.lj-secondary:hover {
  color: var(--lavender); border-color: var(--lavender); background: rgba(108,99,255,.08);
}
.cta-band { background: linear-gradient(135deg,#242044,#181b27); border-color: rgba(108,99,255,.35); }
.cta-band .btn-primary { background: linear-gradient(135deg,#6c63ff,#8b5cf6); color: #fff; }
.cta-band p { color: #c4c9df; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline: 2px solid #38bdf8!important; outline-offset: 4px!important;
}

.page-hero {
  background: radial-gradient(ellipse at 0% 20%,rgba(108,99,255,.13),transparent 55%),
              radial-gradient(ellipse at 100% 80%,rgba(56,189,248,.07),transparent 50%),#08090d;
}
.page-hero .orb { opacity: .6; }
.hero-grid { opacity: .3; }
.hero-pill { background: rgba(24,27,39,.85); }
.info-card,.service-card,.seo-card,.seo-hub-card,.article-card,.process-card,.kpi,
.fr-card,.fr-related a,.timeline-card { border-radius: 12px; }
.form-shell,.selector-wrap { border-radius: 20px; }
.info-card,.article-card,.seo-card,.seo-hub-card,.price-card {
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.info-card:hover,.article-card:hover,.seo-card:hover { border-color: rgba(167,139,250,.4); }

/* A full, unrotated rendering of the supplied 3D logo replaces the old cube. */
.brand-stage { min-height: 440px; perspective: none; }
.brand-system {
  width: min(100%,440px); height: auto; aspect-ratio: 1;
  animation: none!important; transform: none!important;
}
.brand-system::before,.brand-system::after,.brand-system .orbit-node { display: none; }
.core-cube.brand-core {
  position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1;
  border: 1px solid rgba(167,139,250,.16); border-radius: 28px; overflow: hidden;
  transform: none!important; animation: none!important; background: #08090d; box-shadow: none;
}
.brand-core img { display: block; width: 100%; height: auto; object-fit: contain; filter: none; }
.brand-inline-mark { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.alc-brand-mark { background: transparent; border: 0; overflow: hidden; }
.brand-footer-lockup { display: block; width: 180px; max-width: 100%; margin: -8px 0 16px; }
.brand-footer-lockup img { display: block; width: 100%; height: auto; border-radius: 12px; }
footer,.site-shared-footer { background: #0e1018; color: var(--text); border-color: var(--border2); }
.footer-tagline,.footer-bottom,.site-shared-footer .footer-tagline,.site-shared-footer .footer-bottom { color: var(--text2); }
.footer-heading,.site-shared-footer .footer-heading { color: var(--lavender); }
.footer-socials a,.site-shared-footer .footer-socials a {
  background: #181b27; color: var(--lavender)!important; border-color: rgba(167,139,250,.25);
}
.footer-col a,.site-shared-footer .footer-col a { color: var(--text2); }
.footer-col a:hover,.site-shared-footer .footer-col a:hover { color: var(--text); }
.aix-scroll-top { background: #181b27; color: var(--lavender); }

/* Form controls, dashboard labels and assistant messages share readable surfaces. */
input::placeholder,textarea::placeholder { color: #9ba3c4; opacity: .85; }
input,select,textarea { accent-color: #6c63ff; }
.alc-modal { border-color: rgba(167,139,250,.22); }
.alc-main,.alc-body,.syntra-messages,.syntra-panel { background-color: #13151f; }
.alc-close { background: #25223b; color: #fff; }
.alc-close:hover { background: #3a315d; }
.contact-submit-status.error { color: #fda4af; }
.seo-table-wrap { scrollbar-color: #6c63ff #13151f; }
.site-status-pill { color: #34d399; }
.fr-sheet-bar { background: #145c41; }
.fr-cell.head { color: #6ee7b7; }

@media(min-width:1121px) and (max-width:1280px) {
  nav#navbar { padding-inline: 20px; }
  .nav-links { gap: 10px; }
  .nav-logo { font-size: 1rem; }
  .nav-actions .btn-violet,.nav-actions .btn-ghost { padding-inline: 14px; }
}
@media(max-width:900px) {
  .page-hero-inner { gap: 36px; }
  .brand-stage { min-height: auto; }
  .brand-system { width: min(100%,390px); }
}
@media(max-width:600px) {
  :where(.page-hero,.hero,.fr-hero,.lj-hero) h1 { font-size: clamp(2rem,8.5vw,2.6rem); }
  .hero-sub,.fr-lead { font-size: 1rem; line-height: 1.7; }
  nav#navbar { padding-inline: 16px; }
  .nav-logo { gap: 8px; font-size: 1.05rem; }
  .logo-anim-wrap { width: 40px; height: 40px; }
  .brand-system { width: min(100%,340px); }
  .brand-footer-lockup { width: 168px; }
  .mobile-nav { max-height: calc(100dvh - 68px); }
}
@media(prefers-reduced-motion:reduce) {
  .brand-stage,.brand-system,.brand-core { animation: none!important; transform: none!important; }
  .logo-anim-ring,.footer-logo-ring,.site-shared-footer .footer-logo-ring { animation: none!important; }
  .reveal { opacity: 1!important; transform: none!important; filter: none!important; transition: none!important; }
}

/* Keep the CRM setup tabs inside the mobile page, with horizontal tab scrolling. */
.fr-setup-layout > * { min-width: 0; }
.fr-setup-nav { min-width: 0; max-width: 100%; }
@media(max-width:1080px) {
  .fr-setup-layout { grid-template-columns: minmax(0,1fr); }
}
.fr-file code { min-width: 0; overflow-wrap: anywhere; }
.fr-steps { grid-template-columns: minmax(0,1fr); }
.fr-steps > li { min-width: 0; overflow-wrap: anywhere; }