/* =========================================================
   DATAXSYS PREMIUM v6 — DESIGN SYSTEM APPLICATION
   ========================================================= */

/* Header proportions closer to the reference while preserving DataXsys branding */
.site-header { height: var(--dx-header-height); background: rgba(255,255,255,.96); }
.site-header.scrolled { height: 4.5rem; box-shadow: 0 1px 0 rgba(21,21,26,.10); }
.header-shell { width: min(var(--dx-container-wide), calc(100% - (var(--dx-gutter) * 2))); gap: 2.25rem; }
.brand img { width: clamp(9.5rem, 12vw, 11rem); }
.nav-link { font-size: .9rem; color: var(--dx-neutral-700); }

/* Hero: smaller scale, stronger whitespace, friendlier white-first balance */
.hero {
  min-height: 51rem;
  padding-top: clamp(8rem, 12vw, 10.5rem);
  background:
    radial-gradient(circle at 82% 30%, rgba(170,0,0,.055), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fdfcfb 100%);
}
.hero-grid { grid-template-columns: minmax(0, .88fr) minmax(31rem, 1.12fr); gap: clamp(2.5rem, 5vw, 5rem); }
.hero-copy { max-width: 39rem; }
.hero h1 {
  max-width: 38rem;
  margin: 1.75rem 0 1.5rem;
  font-family: var(--dx-font-display);
  font-size: var(--dx-display-1);
  line-height: var(--dx-leading-display);
  letter-spacing: var(--dx-tracking-display);
}
.hero-text { max-width: 34rem; margin-bottom: 1.8rem; font-size: 1.08rem; line-height: 1.58; }
.hero-actions { gap: .75rem; }
.hero-proof { margin-top: 2.25rem; padding-top: 1.4rem; gap: 1.75rem; }
.hero-proof strong { font-family: var(--dx-font-body); font-size: 1rem; }
.dashboard-shell { border-radius: var(--dx-radius-lg); box-shadow: var(--dx-shadow-3); }
.hero-orb-one { opacity: .36; }

/* Global section headings */
.section-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-heading h2,
.value-copy h2,
.calculator-copy h2,
.faq-heading h2,
.cta h2,
.immersive-heading h2,
.simplify-business__heading h2 {
  font-family: var(--dx-font-display);
  font-size: var(--dx-display-2);
  line-height: .98;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.section-heading p,
.value-copy > p,
.calculator-copy > p,
.faq-heading p { max-width: 42rem; font-size: 1.05rem; line-height: 1.62; }
.eyebrow { color: var(--dx-brand-600); letter-spacing: .13em; }

/* Explore section */
.product-preview { background: #fff; }
.product-preview .section-heading { max-width: 62rem; }
.explore-title { max-width: 58rem; font-size: var(--dx-display-2) !important; }
.explore-intro { font-size: 1.1rem !important; }
.preview-frame { border-radius: var(--dx-radius-lg); box-shadow: var(--dx-shadow-2); }
.preview-tab { padding: 1.15rem; font-size: .9rem; }
.preview-panel { min-height: 31rem; padding: clamp(2rem, 5vw, 3.75rem); gap: clamp(2rem, 4vw, 3.5rem); }
.preview-copy h3 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; }

/* Technology marquee: brand logos feel like a trusted platform strip */
.logo-strip { padding-block: 2.4rem; }
.logo-strip p { margin-bottom: 1.7rem; color: var(--dx-neutral-500); }
.technology-set { gap: clamp(3rem, 6vw, 5rem); padding-right: clamp(3rem, 6vw, 5rem); }
.technology-logo { opacity: 1; }
.technology-logo img { width: 2.2rem; height: 2.2rem; }
.technology-logo span { font-size: 1rem; color: var(--dx-neutral-700); }

/* White and light-gray surfaces dominate */
.services, .industries, .faq, .product-preview { background: #fff; }
.value-section, .calculator-section, .immersive, .simplify-business { background: var(--dx-neutral-50); }
.service-card { min-height: 21rem; padding: 2rem; }
.service-card h3 { margin-top: 3.6rem; font-size: 1.55rem; line-height: 1.05; }
.service-card:hover { background: var(--dx-brand-600); }

/* Simplify business cards: one red, one soft gray, one charcoal only */
.simplify-business { color: var(--dx-neutral-900); }
.simplify-business__heading { margin-bottom: 2.75rem; }
.growth-tool-card { border-radius: var(--dx-radius-lg); box-shadow: none; }
.growth-tool-card:nth-child(1) { background: var(--dx-brand-600); }
.growth-tool-card:nth-child(2) { background: #ececf2; }
.growth-tool-card:nth-child(3) { background: #17181f; }

/* Results uses brand color; isolated dark surfaces remain purposeful */
.results { background: var(--dx-brand-600); }
.case-study { border-radius: var(--dx-radius-lg); box-shadow: var(--dx-shadow-2); }
.cta-card { border-radius: var(--dx-radius-xl); background: var(--dx-brand-600); }
.site-footer { background: #242428; }

/* Motion consistency */
.reveal { transition-duration: var(--dx-duration-slow); transition-timing-function: var(--dx-ease-standard); }
.service-card, .technology-logo, .growth-tool-card, .preview-tab { transition-timing-function: var(--dx-ease-standard); }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 42rem; }
  .hero h1 { max-width: 40rem; }
  .hero-visual { width: min(100%, 53rem); }
}

@media (max-width: 860px) {
  .site-header { height: 4.5rem; }
  .primary-nav { inset: 4.5rem 0 0; }
  .hero { padding-top: 8.5rem; }
  .brand img { width: 9.6rem; }
}

@media (max-width: 640px) {
  .hero { min-height: auto; padding-top: 7.75rem; }
  .hero h1 { font-size: var(--dx-display-1); max-width: 100%; }
  .hero-text { font-size: 1rem; }
  .hero-proof { gap: 1rem; }
  .preview-tabs { grid-template-columns: repeat(3, 1fr); }
  .preview-tab { padding: .9rem .5rem; font-size: .72rem; letter-spacing: .03em; }
  .explore-title { font-size: var(--dx-display-2) !important; }
  .simplify-business__heading h2 { font-size: var(--dx-display-2); }
}


/* =========================================================
   DATAXSYS DESIGN SYSTEM v1.1 — typography + channel carousel
   ========================================================= */
body { --dx-title-max: 58rem; }
.hero h1 { font-size: var(--dx-display-1) !important; max-width: 38rem !important; line-height: .96 !important; }
.section-heading h2,
.value-copy h2,
.calculator-copy h2,
.faq-heading h2,
.cta h2,
.immersive-heading h2,
.simplify-business__heading h2 { font-size: var(--dx-display-2) !important; line-height: .98 !important; max-width: var(--dx-title-max); }
.immersive-copy h3 { font-size: var(--dx-display-2) !important; line-height: .98 !important; max-width: 36rem; }
.preview-copy h3 { font-size: var(--dx-display-3) !important; }

.simplify-business__heading { align-items: end; margin-bottom: 2.25rem; }
.simplify-business__heading > div:first-child { max-width: 52rem; }
.simplify-business__heading h2 { margin-top: .65rem; }
.simplify-business__heading p { max-width: 42rem; margin: 1rem 0 0; color: var(--dx-neutral-700); font-size: 1rem; }
.growth-carousel__actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; }
.growth-carousel__buttons { display: flex; gap: .6rem; }
.growth-carousel__buttons button { width: 2.85rem; height: 2.85rem; border: 1px solid var(--dx-neutral-300); border-radius: 50%; background: #fff; cursor: pointer; font-weight: 800; transition: .2s ease; }
.growth-carousel__buttons button:hover { color: #fff; background: var(--dx-brand-600); border-color: var(--dx-brand-600); transform: translateY(-2px); }
.growth-carousel__viewport { overflow: hidden; padding: .5rem .1rem 1.75rem; }
.growth-carousel__track { display: flex; gap: 1.35rem; transition: transform .58s var(--dx-ease-standard); will-change: transform; touch-action: pan-y; }
.growth-carousel .growth-tool-card { flex: 0 0 calc((100% - 2.7rem) / 3); min-width: 0; min-height: 31rem; padding: 1.75rem; }
.growth-carousel__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .2rem; }
.growth-carousel__dots { display: flex; gap: .5rem; }
.growth-carousel__dots button { width: 2rem; height: .25rem; border: 0; padding: 0; border-radius: 999px; background: var(--dx-neutral-200); cursor: pointer; transition: width .25s, background .25s; }
.growth-carousel__dots button.is-active { width: 3.4rem; background: var(--dx-brand-600); }
.growth-carousel__status { color: var(--dx-neutral-500); font-size: .82rem; font-weight: 800; letter-spacing: .08em; }

.growth-tool-card--analytics { background: linear-gradient(145deg, #f9ab00 0%, #e87800 100%); color: #161616; }
.growth-tool-card--analytics .growth-tool-card__badge { color: #673900; background: rgba(255,255,255,.72); }
.growth-tool-card--analytics .analytics-ui__line { color: #e37400; }
.growth-tool-card--analytics .analytics-ui__sources i { background: #e37400; }
.growth-tool-card--facebook { background: #1877f2; color: #fff; }
.growth-tool-card--facebook .growth-tool-card__badge { background: rgba(255,255,255,.18); }
.growth-tool-card--snapchat { background: #fffc00; color: #111; }
.growth-tool-card--snapchat .growth-tool-card__badge { color: #111; background: rgba(255,255,255,.72); }
.growth-tool-card--instagram { color: #fff; background: radial-gradient(circle at 28% 108%,#ffd600 0 18%,#ff7a00 34%,#ff0169 58%,#d300c5 78%,#7638fa 100%); }
.growth-tool-card--instagram .growth-tool-card__badge { background: rgba(255,255,255,.2); }

.social-ui, .snap-ui, .instagram-ui { margin-top: 1.35rem; border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.social-ui { padding: 1.2rem; color: #17233c; background: #fff; transform: rotate(-.7deg); }
.social-ui__brand { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid #e9eef7; }
.social-ui__brand > span { width: 2.5rem; height: 2.5rem; display: grid; place-items: end center; overflow: hidden; border-radius: .65rem; color: #fff; background: #1877f2; font: 900 2rem/1 Arial; }
.social-ui__brand strong,.social-ui__brand small { display: block; }.social-ui__brand small { color: #77839b; font-size: .7rem; }
.social-ui__hero { padding: 1.35rem 0 .6rem; }.social-ui__hero small,.social-ui__hero strong,.social-ui__hero span { display: block; }
.social-ui__hero small { color: #77839b; font-size: .72rem; }.social-ui__hero strong { margin: .25rem 0; font: 800 2.4rem/1 var(--dx-font-body); }.social-ui__hero span { color: #159455; font-size: .72rem; font-weight: 800; }
.social-ui__bars { height: 7.4rem; display: flex; align-items: end; gap: .65rem; padding: .8rem .2rem 0; background: repeating-linear-gradient(to bottom,#fff 0 27px,#e9eef7 28px); }
.social-ui__bars i { flex: 1; border-radius: .35rem .35rem 0 0; background: #1877f2; }
.social-ui__footer { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding-top: 1rem; }.social-ui__footer span { padding: .65rem; border-radius: .7rem; background: #f4f7fc; color: #77839b; font-size: .66rem; }.social-ui__footer strong { display: block; color: #17233c; font-size: .9rem; }

.snap-ui { position: relative; min-height: 20.5rem; padding: 1rem; color: #111; background: rgba(255,255,255,.38); }
.snap-ui__phone { width: 68%; min-height: 18.5rem; margin: 0 auto; padding: .8rem; border: .5rem solid #111; border-radius: 2rem; background: linear-gradient(165deg,#ece9ff,#ffb6d2 55%,#fffc00); box-shadow: 0 20px 35px rgba(0,0,0,.2); }
.snap-ui__camera { display: flex; align-items: center; justify-content: space-between; }.snap-ui__camera > span { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #aa0000; font-weight: 900; }.snap-ui__camera small { padding: .3rem .5rem; border-radius: 999px; background: rgba(255,255,255,.65); }
.snap-ui__copy { margin-top: 5rem; }.snap-ui__copy strong,.snap-ui__copy span { display: block; }.snap-ui__copy strong { font: 800 1.15rem/1.08 var(--dx-font-body); }.snap-ui__copy span { margin-top: .5rem; font-size: .65rem; }
.snap-ui__cta { margin-top: 1.25rem; padding: .55rem; border-radius: 999px; text-align: center; color: #fff; background: #111; font-size: .7rem; font-weight: 800; }
.snap-ui__metric { position: absolute; right: .6rem; bottom: 1.25rem; width: 45%; padding: .9rem; border-radius: .9rem; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.18); }.snap-ui__metric small,.snap-ui__metric strong,.snap-ui__metric span { display: block; }.snap-ui__metric small { color: #777; font-size: .62rem; }.snap-ui__metric strong { font-size: 1.45rem; }.snap-ui__metric span { font-size: .6rem; }

.instagram-ui { overflow: hidden; color: #222; background: #fff; transform: rotate(.6deg); }
.instagram-ui__header { display: flex; align-items: center; gap: .65rem; padding: 1rem; }.instagram-ui__avatar { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#ff7a00,#ff0169,#7638fa); font-weight: 900; }.instagram-ui__header div { flex: 1; }.instagram-ui__header strong,.instagram-ui__header small { display: block; }.instagram-ui__header small { color: #888; font-size: .65rem; }.instagram-ui__header i { font-style: normal; }
.instagram-ui__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .18rem; }.instagram-ui__grid span { aspect-ratio: 1; background: linear-gradient(145deg,#f6d365,#fda085); }.instagram-ui__grid span:nth-child(2) { background: linear-gradient(145deg,#a18cd1,#fbc2eb); }.instagram-ui__grid span:nth-child(3) { background: linear-gradient(145deg,#84fab0,#8fd3f4); }.instagram-ui__grid span:nth-child(4) { background: linear-gradient(145deg,#fccb90,#d57eeb); }.instagram-ui__grid span:nth-child(5) { background: linear-gradient(145deg,#e0c3fc,#8ec5fc); }.instagram-ui__grid span:nth-child(6) { background: linear-gradient(145deg,#f093fb,#f5576c); }
.instagram-ui__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; padding: 1rem; }.instagram-ui__stats div { text-align: center; }.instagram-ui__stats strong,.instagram-ui__stats small { display: block; }.instagram-ui__stats strong { font-size: .95rem; }.instagram-ui__stats small { color: #888; font-size: .6rem; }

@media (max-width: 980px) {
  .growth-carousel .growth-tool-card { flex-basis: calc((100% - 1.35rem) / 2); }
  .simplify-business__heading { align-items: flex-start; }
}
@media (max-width: 640px) {
  .simplify-business__heading { flex-direction: column; gap: 1.25rem; }
  .growth-carousel__actions { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .growth-carousel .growth-tool-card { flex-basis: 100%; min-height: 30rem; }
  .growth-carousel__dots button { width: 1.2rem; }
  .growth-carousel__dots button.is-active { width: 2.2rem; }
}

.btn-client-website{
display:inline-flex;align-items:center;justify-content:center;
padding:16px 30px;border-radius:999px;
background:#fff!important;color:#111!important;
border:2px solid #fff!important;font-weight:700;
text-decoration:none;transition:all .25s ease}
.btn-client-website:hover{
background:#f2f2f2!important;color:#111!important;
border-color:#f2f2f2!important;
box-shadow:0 10px 24px rgba(0,0,0,.18);
transform:translateY(-2px)}