/* ASRock AI Center — NeweggBusiness LP custom styles
   Load order: after images/css/main.css and images/css/responsive-lp.css.
   Every rule is scoped to #main so the B2B global header/footer are untouched,
   and so it out-ranks responsive.v1 (which loads at the end of <body>).
================================================================*/
:root {
  --ne-yellow:      #FA9D28;
  --ngg-orange:     #FA9D28;
  --ngg-darkorange: #FF8500;
  --ngg-btn-txt:    #212121;
  --sp-section:     40px;
}

/* Full-bleed: cancel the live site's #main gutters for this page only.
   !important because sitewide CSS loads after this file (responsive.v1 at end of body). */
body { margin: 0; }
html body #wrapper #main { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; max-width: none !important; width: auto !important; }


/* Scroll reveal — content visible by default; JS opts in */
#main .reveal { opacity: 1; transform: none; }
#main .will-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
#main .will-reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #main .aic-lp *, #main .aic-lp *::before, #main .aic-lp *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  #main .will-reveal { opacity: 1; transform: none; }
}
#main .aic-lp img { max-width: 100%; display: block; }
#main .aic-lp a { text-decoration: none; border-bottom: none; }


/* ASRock AI Center — NeweggBusiness
   All rules scoped to .aic-lp (lives inside .section-inner).
   Typeface override: Inter, per the supplied mockup (see build notes).
================================================================*/

:root {
  --aic-bg:          #fafafa;
  --aic-bg-soft:     #f5f7fa;
  --aic-surface:     #ffffff;
  --aic-line:        #e5e7eb;
  --aic-line-soft:   #eef0f3;
  --aic-ink:         #111827;
  --aic-body:        #4b5563;
  --aic-muted:       #6b7280;
  --aic-blue:        #2563eb;
  --aic-blue-grad:   #2864dc;
  --aic-teal:        #4fa3c7;
  --aic-green:       #55965a;
  --aic-green-grad:  #517d2f;
  --aic-green-ink:   #4d7a12;
  --aic-lime:        #85c226;
  --aic-brand-green: #72b32c;
  --aic-violet:      #5b5bd6;
  --aic-dark:        #0b1220;
  --aic-dark-card:   #111a2c;
  --aic-dark-line:   rgba(255,255,255,0.09);
  --aic-dark-ink:    #ffffff;
  --aic-dark-body:   #cbd5e1;
  --aic-grad-dk-a:   #3f7ee0;
  --aic-grad-dk-b:   #6fae3a;
  --aic-font:        'Inter', 'Open Sans', Arial, sans-serif;
  --aic-wrap:        1080px;
  --aic-radius:      18px;
}

#main .aic-lp {
  font-family: var(--aic-font);
  color: var(--aic-ink);
  background: var(--aic-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
#main .aic-lp *, #main .aic-lp *::before, #main .aic-lp *::after { box-sizing: border-box; }
#main .aic-lp :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
#main .aic-lp :where(ul, ol) { list-style: none; }
#main .aic-lp h1, #main .aic-lp h2, #main .aic-lp h3, #main .aic-lp p, #main .aic-lp li, #main .aic-lp a, #main .aic-lp button, #main .aic-lp strong, #main .aic-lp small, #main .aic-lp span { font-family: var(--aic-font); }
#main .aic-lp a:focus-visible, #main .aic-lp button:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 3px; }

#main .aic-wrap { max-width: calc(var(--aic-wrap) + 48px); margin: 0 auto; padding: 0 24px; }
#main .aic-split { display: grid; grid-template-columns: 1fr; gap: 40px; }
#main .aic-sec { padding: var(--sp-section) 0; }

/* Type */
#main .aic-h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--aic-ink); margin: 20px 0 22px; }
#main .aic-h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; color: var(--aic-ink); }
#main .aic-h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--aic-ink); margin-bottom: 20px; }
#main .aic-grad {
  background: linear-gradient(90deg, var(--aic-blue-grad) 0%, var(--aic-green-grad) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--aic-blue);
  padding-bottom: 0.08em; /* keeps descenders from clipping */
}
#main .aic-grad--dark { background-image: linear-gradient(90deg, var(--aic-grad-dk-a) 0%, var(--aic-grad-dk-b) 100%); }
#main .aic-lead, #main .aic-body { font-size: 16px; line-height: 1.65; color: var(--aic-body); }
#main .aic-lead { max-width: 480px; margin-bottom: 30px; }
#main .aic-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; margin-bottom: 16px; }
#main .aic-eyebrow--green { color: var(--aic-green-ink); }
#main .aic-eyebrow--blue { color: var(--aic-blue); }
#main .aic-eyebrow--lime { color: var(--aic-lime); }
#main .aic-eyebrow--violet { color: var(--aic-violet); }

/* Button — Newegg standard (orange bg, #212121 text) */
#main .aic-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 22px; border-radius: 999px;
  background: var(--ngg-orange); color: var(--ngg-btn-txt);
  font-family: var(--aic-font); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}
#main .aic-btn:hover, #main .aic-btn:focus-visible { background: var(--ngg-darkorange); color: var(--ngg-btn-txt); text-decoration: none; }
#main .aic-btn--wide { min-width: 200px; box-shadow: 0 8px 28px rgba(250,157,40,0.28); }

/* Panels */
#main .aic-panel { background: var(--aic-bg-soft); border: 1px solid var(--aic-line); border-radius: var(--aic-radius); }

/* ── HERO ── */
#main .aic-hero { display: block; width: 100%; max-width: 1920px; margin: 0 auto; line-height: 0; }
#main .aic-hero img { width: 100%; height: auto; }

/* ── 1 · INTRO ── */
#main .aic-intro {
  padding-top: 48px; padding-bottom: 56px;
  background:
    radial-gradient(60% 70% at 15% 0%, rgba(133,194,38,0.07) 0%, rgba(133,194,38,0) 70%),
    radial-gradient(50% 80% at 85% 20%, rgba(37,99,235,0.05) 0%, rgba(37,99,235,0) 70%),
    linear-gradient(180deg, #f6f7f3 0%, var(--aic-bg) 100%);
}
#main .aic-logo { width: 100%; max-width: 600px; height: auto; }
#main .aic-flow { padding: 22px 20px 20px; }
#main .aic-flow-title { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--aic-ink); margin-bottom: 18px; }
#main .aic-flow-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--aic-surface); border: 1px solid var(--aic-line-soft); border-radius: 10px;
  padding: 11px 16px; position: relative;
}
#main .aic-flow-item + .aic-flow-item { margin-top: 32px; }
#main .aic-flow-item + .aic-flow-item::before {
  content: '\2193'; position: absolute; left: 50%; top: -27px; transform: translateX(-50%);
  font-size: 14px; line-height: 20px; color: var(--aic-blue);
}
#main .aic-flow-item strong { display: block; font-size: 15px; font-weight: 600; color: var(--aic-ink); line-height: 1.35; }
#main .aic-flow-item small { display: block; font-size: 14px; color: var(--aic-muted); line-height: 1.4; }
#main .aic-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
#main .aic-dot--1 { background: var(--aic-blue); }
#main .aic-dot--2 { background: var(--aic-teal); }
#main .aic-dot--3 { background: var(--aic-green); }
#main .aic-dot--4 { background: var(--aic-lime); }

/* ── 2 · SYSTEM DECISION ── */
#main .aic-system { padding-top: 64px; padding-bottom: 64px; }
#main .aic-split--top { margin-top: 36px; }
#main .aic-mission { border-top: 1px solid var(--aic-line); margin-top: 30px; padding-top: 26px; }
#main .aic-mission .aic-eyebrow { margin-bottom: 12px; }
#main .aic-ask { padding: 24px 24px 26px; }
#main .aic-ask .aic-eyebrow { margin-bottom: 20px; }
#main .aic-ask-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.45; color: var(--aic-ink); }
#main .aic-ask-list li + li { margin-top: 20px; }
#main .aic-ask-list li::before { content: '?'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--aic-green-ink); }

/* ── 3 · DELIVERY ── */
#main .aic-delivery { border-top: 1px solid var(--aic-line-soft); padding-top: 56px; padding-bottom: 64px; }
#main .aic-photo { margin-top: 28px; border-radius: var(--aic-radius); overflow: hidden; border: 1px solid var(--aic-line); box-shadow: 0 10px 30px rgba(17,24,39,0.08); aspect-ratio: 3 / 2; background: var(--aic-bg-soft); }
#main .aic-photo img { width: 100%; height: 100%; object-fit: cover; }
#main .aic-delivery-intro { margin-bottom: 52px; max-width: 420px; }
#main .aic-steps { margin-bottom: 28px; }
#main .aic-steps li { display: flex; gap: 14px; align-items: flex-start; }
#main .aic-steps li + li { margin-top: 26px; }
#main .aic-step-num {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--aic-blue); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 32px; text-align: center; letter-spacing: 0;
  margin-top: 2px;
}
#main .aic-steps strong { display: block; font-size: 18px; font-weight: 600; color: var(--aic-blue); line-height: 1.3; margin-bottom: 4px; }
#main .aic-steps li > span:last-child { font-size: 16px; color: var(--aic-body); line-height: 1.5; }

/* ── 4 · DEPLOYMENT MODELS ── */
#main .aic-models { padding-top: 64px; padding-bottom: 64px; }
#main .aic-models-head .aic-body { max-width: 600px; margin-top: 16px; }
#main .aic-model-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
#main .aic-model {
  background: var(--aic-surface); border: 1px solid var(--aic-line); border-radius: 20px;
  padding: 32px 32px 36px; min-height: 260px;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
#main .aic-model:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17,24,39,0.08); }
#main .aic-model-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--aic-ink); line-height: 1.25; margin-bottom: 18px; }
#main .aic-model-tag { font-size: 16px; font-weight: 700; color: var(--aic-ink); line-height: 1.5; margin-bottom: 12px; }
#main .aic-model-desc { font-size: 16px; color: var(--aic-body); line-height: 1.6; }
#main .aic-model--feature { background: var(--aic-dark); border: 2px solid var(--aic-brand-green); }
#main .aic-model--feature .aic-model-title, #main .aic-model--feature .aic-model-tag { color: var(--aic-dark-ink); }
#main .aic-model--feature .aic-model-desc { color: var(--aic-dark-body); }
#main .aic-note { font-size: 14px; color: var(--aic-muted); line-height: 1.6; margin-top: 28px; max-width: 680px; }

/* ── 5 · INFRASTRUCTURE ── */
#main .aic-infra { background: var(--aic-dark); padding-top: 72px; padding-bottom: 72px; }
#main .aic-infra .aic-h2 { color: var(--aic-dark-ink); }
#main .aic-infra-head .aic-body { color: var(--aic-dark-body); max-width: 680px; margin-top: 14px; }
#main .aic-infra-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
#main .aic-infra-card {
  display: flex; flex-direction: column;
  background: var(--aic-dark-card); border: 1px solid var(--aic-dark-line); border-radius: 24px;
  padding: 28px 24px 24px; min-width: 0;
}
#main .aic-infra-card .aic-eyebrow { margin-bottom: 18px; }
#main .aic-infra-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--aic-dark-ink); margin-bottom: 14px; }
#main .aic-infra-desc { font-size: 16px; line-height: 1.6; color: var(--aic-dark-body); }
#main .aic-infra-cta { margin-top: 36px; }

/* Carousel */
#main .aic-carousel { position: relative; display: flex; align-items: center; margin-top: auto; padding-top: 28px; }
#main .aic-car-viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; }
#main .aic-car-track { display: flex; transition: transform 0.35s ease-out; }
#main .aic-car-slide { flex: 0 0 100%; height: 220px; display: flex; align-items: center; justify-content: center; padding: 0 26px; }
#main .aic-carousel.is-static .aic-car-slide { padding: 0 6px; }
#main .aic-car-slide a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#main .aic-car-slide img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.2s ease-out; } /* fixed box: placeholder→image swap can't move it (CLS) */
#main .aic-car-slide a:hover img { transform: translateY(-4px); }
#main .aic-car-btn {
  position: absolute; top: calc(50% + 14px); transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--aic-dark-ink);
}
#main .aic-car-btn::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 1.5px solid rgba(255,255,255,0.75); border-radius: 50%; transition: background-color 0.2s ease-out;
}
#main .aic-car-btn:hover::before { background: rgba(255,255,255,0.12); }
#main .aic-car-btn .fa { position: relative; font-size: 16px; line-height: 1; }
#main .aic-car-prev { left: -14px; }
#main .aic-car-next { right: -14px; }
#main .aic-carousel.is-static .aic-car-btn { display: none; }

/* Scroll reveal is defined in the defaults block (.reveal / .will-reveal) */

/* Responsive
================================*/
@media only screen and (max-width: 550px) {
  #main .aic-sec { padding-top: 40px; padding-bottom: 40px; }
  #main .aic-wrap { padding: 0 18px; }
  #main .aic-h1 { margin-top: 16px; }
  #main .aic-lead { margin-bottom: 24px; }
  #main .aic-btn { width: 100%; max-width: 320px; }
  #main .aic-model { min-height: 0; padding: 26px 24px 28px; }
  #main .aic-delivery-intro { margin-bottom: 32px; }
  #main .aic-car-slide { height: 200px; }
}
@media only screen and (max-width: 375px) {
  #main .aic-wrap { padding: 0 14px; }
  #main .aic-flow, #main .aic-ask { padding-left: 16px; padding-right: 16px; }
  #main .aic-flow-item { padding: 10px 12px; }
}
@media only screen and (min-width: 641px) {
  #main .aic-infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main .aic-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #main .aic-model { padding: 28px 24px 32px; }
}
@media only screen and (min-width: 769px) {
  #main .aic-split { grid-template-columns: minmax(0, 1fr) minmax(0, 433px); gap: 48px; align-items: start; }
  #main .aic-intro .aic-split { align-items: center; }
  #main .aic-split--delivery { grid-template-columns: minmax(0, 584px) minmax(0, 1fr); gap: 36px; }
  #main .aic-split--delivery > .aic-col:last-child { padding-top: 0; }
  #main .aic-split--delivery .aic-h2 { font-size: clamp(30px, 3.4vw, 42px); }
  #main .aic-model { padding: 32px 32px 36px; }
}
@media only screen and (min-width: 1025px) {
  #main .aic-sec.aic-system, #main .aic-sec.aic-models { padding-top: 80px; padding-bottom: 72px; }
  #main .aic-infra { padding-top: 80px; padding-bottom: 88px; }
  #main .aic-infra-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  #main .aic-nowrap { white-space: nowrap; }
  #main .aic-split--delivery .aic-h2 { position: relative; z-index: 1; }
  #main .aic-infra-card { padding: 28px 22px 22px; }
  #main .aic-car-slide { height: 200px; }
}
@media only screen and (min-width: 1440px) {
  #main .aic-lp { --aic-wrap: 1120px; }
  #main .aic-infra-card { padding: 30px 26px 24px; }
  #main .aic-car-slide { height: 220px; }
}