@media (max-width: 550px) {
  .section-split {
    grid-template-columns: 1fr;
  }
}@media (max-width: 550px) {
  .section-split {
    grid-template-columns: 1fr;
  }
}

@font-face {
    font-family: 'IntelOne Display';
    src: url('../fonts/IntelOneDisplay-Bold.woff2') format('woff2'),
        url('../fonts/IntelOneDisplay-Bold.woff') format('woff'),
        url('../fonts/IntelOneDisplay-Bold.ttf') format('truetype');         ;
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* template.css overrides -- use only when absolutely necessary
================================*/
.banner {padding-top:89.667%;}
.banner-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 641px;
background: url(../imgs/hero.jpg) no-repeat 0 0;
background-size:289.722222%;
}
.header2021-logo-img > img{
  width:102px !important;
  height:auto;
}

.price{margin:0 0 0.825em 0;}
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:#cc4e00;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:19px solid #cc4e00;border-right: 10px solid transparent;margin-bottom:0;}
.price-save-label{padding:0 0 1px 6px}
.price-save-dollar{padding:0 0 1px 2px}
.price-save-percent{padding:0 6px 1px 2px}
.price-save-label:before,.price-save-percent:after{content:'';position:absolute;bottom:0;width:0;height:0;}
.item-cell{border-bottom:none;}
.item-promo{margin-top:1em;}
.item-promo-code{border-color:#888;}
.item-promo-title span{color:#333;}
.item-promo-info{color:#cc4e00;}
.item-promo-code{padding:1.5em 5px 1em 5px;height:auto;color:#cc4e00;}
.item-promo-code-save{display:inline;}
li.mir{display:none;}
.instantSavings, .mir{display:block;}
.finalPrice{font-size:1.6em;}
.instantSavings{font-size:0.925em}
.finalPrice, .instantSavings {color:#000;}
.shipping{visibility:hidden;}
.mir{font-size:1em;margin:0;color:#016B04}
.header .logo { width:125px; }
.items-grid:after { background:none; }
.item-title a { font-size:14px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; color:#000; }
/* No Orange Bar for Custom LPs with Black Background
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:none;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:none;border-right: 10px solid transparent;margin-bottom:0;}
================================*/

/* custom CSS on a per project basis
================================*/
body { background-color:#000; }
.ngg-line { /*background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(153,153,153,1) 50%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(153,153,153,1) 50%, rgba(0,0,0,1) 100%);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(153,153,153,1) 50%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); height:1px; */
}
.combo-items li:nth-child(odd) { background:transparent; }
.combo-items li { color:white; font-weight:bold; }
.disclaimer {     
    color: #3a3a3a;
    width: 100%;
    text-align: center;
    margin: 0;
    background-color: #ffffff;
    line-height: 30px;
 }

.ngg-section { position:relative; color:#fff; }
.ngg-text-left { position:absolute; top:0; left:0; padding:5%; max-width:500px; }
.ngg-text-right { position:absolute; top:0; right:0; padding:5%; max-width:500px; }

.ngg-sect2 { background:url('../imgs/section2dsk.jpg') no-repeat; background-size:cover; padding-top:52.38%; max-height:716px; }
.ngg-sect3 { background:url('../imgs/section3dsk.jpg') no-repeat; background-size:cover; padding-top:53.44%; max-height:731px; }
.ngg-sect4 { background:url('../imgs/section4dsk.jpg') no-repeat; background-size:cover; padding-top:60.75%; max-height:846px; }
.ngg-sect5 { background:url('../imgs/section5dsk.jpg') no-repeat; background-size:cover; padding-top:53.00%; max-height:736px; }

.ngg-btn { margin:3% 0 0; max-width:180px; }
.ngg-btn a { padding:8px 16px; border:2px solid #fff; font-size:2.5rem; font-weight:700; transition:1s; }
.ngg-btn a:hover { background:#fff; color:#000; transition:0.8s; }
.ngg-seebtn { font-size:14px; width:100%; max-width:180px; }

.ngg-all-skus { padding:0; }
.ngg-sku { display:flex; justify-content:space-around; margin:5% auto; }
.ngg-sku-title { text-align:center; color:#000; font-weight:700; font-size:3rem; padding:3% 0 3%; }
.ngg-add { padding:15px 0; }

.disclaimer2 { color:#3a3a3a; text-align:left; font-size:12px; padding:0 3% 3%; line-height: 24px; }

.main-title {
    position: relative;
    margin: 1.5em 5%;
    color: #000;
    font-size: 1.2em;
	text-transform:none;
 text-align: center;
    font-family: 'IntelOne Display', 'Open Sans Condensed', 'Helvetica Narrow', arial, helvetica, sans-serif;
}
.section-inner {
    background-color: #ffffff;
}

/* --------------------------------------------
   Section base: background + overlay
   -------------------------------------------- */
.section {
 
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 40vh;
}

.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 18, 0.85) 0%,
    rgba(10, 10, 18, 0.4) 50%,
    rgba(10, 10, 18, 0.2) 100%
  );
  pointer-events: none;
}

.section-inner2 {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-page);
  padding: 0%;
}

/* Lighter than default .section::before so the hero photo stays visible */
.section-hero::before {
  background: linear-gradient(
    90deg,
    rgba(10, 10, 18, 0.4) 0%,
    rgba(10, 10, 18, 0.1) 50%,
    transparent 85%
  );
}

.headline {
  font-size: clamp(28px, 6vw, 90px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.15;
  margin: 0 0 1rem;
  max-width: 28ch;
  font-family: 'IntelOne Display',sans-serif;
}

.headline-hero {
  max-width: 12ch;
}
/* --------------------------------------------
   Section 2: Performance — pixel grid + optional photo bg
   -------------------------------------------- */
.section-performance {
  background-image: 
    url('../imgs/Section-2.jpg');
  background-color: #0a0a14;
}

.section-performance .headline
 {
  text-align: center;
  color:#ffffff;
  font-size: clamp(28px, 6vw, 90px);
  margin-left: auto;
  margin-right: auto;
   font-family: 'IntelOne Display',sans-serif;
 
}


.section-performance .body-text {
  text-align: left;
  color:#ffffff;
  font-size:24px;
  margin-left: auto;
  margin-right: auto;
}

.section-performance .bullet-list {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size:24px;
  color:#ffffff;
}

.section-performance .section-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 0, 166, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, transparent 8px, rgba(0, 212, 255, 0.1) 8px, rgba(0, 212, 255, 0.1) 9px, transparent 9px),
    linear-gradient(rgba(142, 0, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 20px 20px;
  pointer-events: none;
  opacity: 0.85;
}

.body-text {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 400;
  font-style: normal;
  margin: 0 0 1.25rem;
  max-width: 900px;
}

.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 24px;
  margin: 0 0 0rem;
    max-width: 900px;
	text-align:left;
}

.bullet-list li {

  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.bullet-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-accent-blue);
}

/* --------------------------------------------
   Section 3: Focus
   -------------------------------------------- */
.section-focus {
  background-color: #000000;
}

/* Right column: composite art (game frame + processor box) */
.section-focus-visual {
  min-width: 0;
  width: 100%;
  min-height: clamp(260px, 48vw, 516px);
  padding-top:15%;
  background-color: #000;
  background-image: url("../imgs/Section-3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 78% center;
  
}

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
 align-items: center;
  background-color:#000;
}
.section-split .headline
 {
  text-align: left;
  color:#ffffff;
  font-size: clamp(28px, 6vw, 90px);
  margin-left: 20%;
  margin-right: 0;
 
}
.section-split .body-text {
  text-align: left;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  margin: 1rem 8rem 1.25rem;;
  max-width: 900px;
  color:#ffffff;
  margin-left: 20%;
  margin-right: 0;
}


.content-left {
  min-width: 0;
}

.content-right.content-visuals {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.frame-box {
  border: 2px solid var(--color-accent-blue);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.frame-game {
  width: min(280px, 100%);
  aspect-ratio: 16 / 10;
}

.frame-label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index: 1;
}

.frame-placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  background-image: 
    url('../imgs/Section-3.png');
}

.frame-placeholder-game {
  min-height: 160px;
}

.product-box {
  flex-shrink: 0;
}

.product-box-small {
  width: 100px;
  height: 180px;
}

.product-box-small .frame-placeholder {
  min-height: 180px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
}
.section3 {
    
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
/* --------------------------------------------
   Section 4: Speed — text only; optional full-bleed bg image on .section-speed
   -------------------------------------------- */
.section-speed {
  background-color: #000000;
  background-image: url('../imgs/Section-4.png');
  background-size: contain;       
  background-repeat: no-repeat;
  background-position: center;  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 60vh;               
  padding: 5% 10%;                
  position: relative;
}

.section-speed .headline {
  text-align: left;
  color: #ffffff;
  clamp(28px, 6vw, 90px);
  margin: 0 0 1rem 0;
  max-width: 700px;
  line-height: 1.1;
   font-family: 'IntelOne Display',sans-serif;
}

.section-speed .body-text {
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  max-width: 500px;
  color: #ffffff;
}

.section4 {
    display: flex;
    align-items: center;
    
    background-position: right;   
    background-repeat: no-repeat;
    position: relative;
    min-height: 40vh;   }



/* --------------------------------------------
   Section 5: AI — diagonal neon + framed photo area
   -------------------------------------------- */
/* --------------------------------------------
   Section 5: AI — background photo + text overlay
   Asset: assets/section-ai-bg.png
   -------------------------------------------- */
.section-ai {
  min-height: min(88vh, 920px);
  align-items: flex-start;
  background-color: #050814;
  background-image: 
    url('../imgs/ai.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-ai::before {
  background: linear-gradient(
    180deg,
    rgba(6, 10, 24, 0.35) 0%,
    transparent 40%,
    transparent 65%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.section-ai-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(2rem, 8vw, 5rem);
}

.section-ai .headline,
.section-ai .body-text {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 4px 28px rgba(0, 0, 0, 0.55);
	 
}

.section-centered {
  text-align: center;
  color:#ffffff;
}

.headline-center {
  margin-left: auto;
  margin-right: auto;
  max-width: 16ch;
}

.body-text-center {
  margin-left: auto;
  margin-right: auto;
  max-width: 36rem;
}


.section-ai .headline
 {
  text-align: center;
  color:#ffffff;
  font-size:clamp(28px, 6vw, 90px);
  padding-top:0px;
   font-family: 'IntelOne Display',sans-serif;
 margin-right: auto;

 
}
.section-ai .body-text {
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
 
  max-width: 800px;
  color:#ffffff;
}

/* --------------------------------------------
   Section 6: Footer
   -------------------------------------------- */
.section-footer {
  background-image: linear-gradient(
    360deg, #2388FF 0%,
	#08122E 50%,
	#000 100%
);
  background-color: #0a0a18;
  padding:8%;
}

.section-footer .section-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(142, 0, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.headline-footer {
  font-size: 90px;
}

.copyright {
  font-size: 16px;
  margin: 1rem 0 1.5rem;
  opacity: 0.9;
}

.disclaimers {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.8;
  max-width: 120rem;
  margin: 0 auto 2rem;
}

.disclaimers p {
  margin: 0 0 0.5rem;
}

.disclaimers a.learn-more {
  text-decoration: underline;
  color:#ffffff;
}
.disclaimers a.learn-more:hover {
  text-decoration: underline;
  color:#ffffff;
}
.processor-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.logo-slot {
    
    max-width: 500px;
    width: 100%;
}

.logo-slot-intel-inside {
  background: linear-gradient(135deg, rgba(142, 0, 255, 0.3), rgba(255, 0, 166, 0.2));
}

.ngg-item-btn a {
    border-radius: 35px;
    padding: 10px 0;
    width: 100%;
    letter-spacing: 0;
}
.btn-primary, .button.button-primary, .ngg-shopall, .ngg-buynow {
    text-transform: none;
    font-family: var(--ngg-opensans);
    border: 0;
    background-color: #fa9d28;
    color: #000;
}
.btn-primary, .button.button-primary {
    border-color: #c60;
    background: #ffa33a;
}
.ngg-shopall, .ngg-buynow {
    border-radius: 30px;
    text-align: center;
    transition: 0.5s;
    font-weight: 700;
    font-family: var(--ngg-opensans);
	font-size: 18px;
    padding: 15px 8%;
}

/* responsive CSS on a per project basis
================================*/


@media only screen and (max-width: 768px) {
  /* insert responsive CSS for tablet screens below 768px */
}

@media only screen and (max-width: 550px) {
	/* insert responsive CSS for mobile screens below 550px */
  .items-grid .item-cell { width:90%; text-align:center; border-bottom:1px solid #333; padding-bottom:8%; }
  .item-img > img { max-width:300px; }
  .items-grid .item-title { height:auto; }
    .ngg-sku { flex-direction:column-reverse; margin-top:10%; }
.ngg-sect2 { background:url('../imgs/section2mbl.jpg') no-repeat; background-size:cover; padding-top:135.38%; max-height:1035px; }
	.ngg-sect3 { background:url('../imgs/section3mbl.jpg') no-repeat; background-size:cover; padding-top:137.77%; max-height:1056px; }
	.ngg-sect4 { background:url('../imgs/section4mbl.jpg') no-repeat; background-size:cover; padding-top:114.81%; max-height:879px; }
	.ngg-sect5 { background:url('../imgs/section5mbl.jpg') no-repeat; background-size:cover; padding-top:65.81%; max-height:499px; }
	
	.section-performance .headline
 {
 font-size:50px;  
}

.section-performance .body-text {
  text-align: center;
  color:#ffffff;
  font-size:16px;
  
}

.section-performance .bullet-list {
  font-size:16px;
}


.section-split .headline {
    text-align: left;
    color: #ffffff;
    font-size: 50px;
    
}


 .section-ai {
    align-items: flex-start;
    padding-top: 20px;
    background-position: center 70%;
  }

  .section-ai-inner {
    padding-top: 10px;
  }

  .section-ai .headline {
    font-size: 28px;
  }

  .section-ai .body-text {
    font-size: 16px;
  }

.section {
    min-height: auto;
    padding: 40px 0 20px;
  }
  
  
  .section-inner2 {
    padding: 20px;
  }

  
  .headline {
    font-size: 32px !important;
    text-align: center;
  }

  
  .body-text {
    font-size: 16px !important;
    margin: 10px 0;
  }

 
  .section-focus-visual {
    min-height: 220px;
    background-position: center;
  }
  
  .section-split {
    grid-template-columns: 1fr;
  }
  
.section-speed, .section-ai {
    background-image: none;  
  }
  
  .section-speed::after {
    content: "";
    display: block;
    width: 100%;
    height: 220px; 
    background-image: url('../imgs/Section-4.png');
    background-size: cover;
    background-position: center;
    margin-top: 20px;
  }
  
  .section-speed .headline {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .section-speed .body-text {
    font-size: 16px;
    margin: 0;
  }

  .section-ai { flex-direction: column; }

  .section-ai::after {
    content: "";
    display: block;
    width: 100%;
    height: 220px;
    background-image: url(../imgs/ai.png);
    background-size: cover;
    background-position: center;
    margin-top: 20px;
  }
  
    .section-focus-visual {
    min-height: 220px;
  }
  
  .section-inner2 {
    padding: 0px;
  }
  

  
  .section-footer .section-inner {
    padding: 20px 0;      
    overflow-x: hidden;    
  }
  .headline-footer {
    font-size: clamp(18px, 5vw, 32px);
  }
  
  .copyright {
    font-size: 12px;
  }
  .disclaimers { padding:0 10px; }
  
  .section4 {
    min-height: auto;          
    padding: 5% 5%;  
	}


  
  .section4 {
        min-height: auto;              
        background-size: contain;       
        background-position: right;   
        padding: 2rem 5%;               
    }

    .section4 .headline,
    .section4 .body-text {
        font-size: 1.5rem;             
        line-height: 1.4;
        text-align: center;             
    }
	
	 .section-split .headline,
    .section-split .body-text {
        text-align: center;
        margin-left: 5%; 
        margin-right: 5%;
        font-size: 16px; 
    }
	
	
}


@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 481px */
    .two-items .items-split { border-left:0; }
	.items4col { width:19% !important; margin:0; }
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner { padding-top: 46.96%; }
	.banner-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}	
    .items-grid .item-title { color:#fff; height:6em; }
    
    .ngg-sectbanner { padding-top: 26.286%; }
	.ngg-sect-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img2 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img3 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img4 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
	
	 .ngg-sect-img5 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
	

  
  
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
		.items-grid .item-cell { width: 22%; }

}
@media only screen and (min-width: 1000px) {
	/* insert responsive CSS for screens above 1025px */
	.ngg-details3 {
    position: relative;
    top: 0;
    right: -50%;
    padding: 4% 43% 5% 2%;
    color: #fff;
    z-index: 1;
    max-width: 412px;
}

}

@media only screen and (min-width: 912px) {
	/* insert responsive CSS for screens above 1025px */
	.ngg-details3 {
    position: relative;
    top: 0;
    right: -50%;
    padding: 4% 43% 5% 2%;
    color: #fff;
    z-index: 1;
    max-width: 420px;
}
}