/* ============================================================
   PLAYER POPs — Introduction One-Pager  |  pop-intro.css
   ============================================================ */

:root {
    --pi-gold:         #E8A020;          /* amber-gold — labels, step bars, accents */
    --pi-gold-semi-dark:  #E6A800;
	--pi-gold-quarter-dark: #FEBC07;
    --pi-gold-bright:  #FBBC35;          /* bright yellow — CTA submit button       */
	--pi-gold-brighter: #F5C518;
    --pi-gold-light: #f1c521;
    --pi-grey-border:  #E2E2DC;

    --pi-dark:         #040404;          /* near-black — sections 1 bg (right), 2, 5 */
    --pi-dark-card:    #353537;          /* card bg on dark sections                  */
    --pi-light-card:    #FEFEFE;          /* card bg on dark sections                  */
    --pi-hero-bg:      #FFF;
    --pi-cream:        #F0F0ED;          /* warmer cream — features section 3          */

    --pi-text-dark:    #0D0D0D;
    --pi-text-grey:    #666;
    --pi-on-dark:      rgba(255,255,255,.88);
    --pi-on-dark-mute: #888888;
    --pi-on-dark-light: #AAA;

    --pi-font-body:    'Inter', system-ui, sans-serif;
    --pi-font-bar-con: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
    --pi-font-bar: 'Barlow', 'Arial Narrow', Impact, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--pi-font-body);
    -webkit-font-smoothing: antialiased;
    color: var(--pi-text-dark);
    overflow-x: hidden;
}

/* ─── Shared type helpers ───────────────────────── */

/* Gold eyebrow — used on dark sections */
.pi-eyebrow {
	font-family: var(--pi-font-bar-con);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    font-style: normal;
    color: var(--pi-text-dark);
    margin: 0 0 14px;
}

/* Gold eyebrow — used on light sections */
.pi-eyebrow-dark {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    font-style: normal;
    color: var(--pi-gold-bright);
    margin: 0 0 14px;
}

.pi-hero-subtitle {
	font-family: var(--pi-font-bar);
	font-size: 18px;
	letter-spacing: .06em;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	margin: 10px 10px 10px 0;
}

/* Section heading — white (dark bg) */
.pi-section-heading {
    font-family: var(--pi-font-bar-con);
    font-size: 50px;
    font-weight: 700;
    line-height: 51px;
    letter-spacing: -.05em;
    color: #fff;
    margin: 0;
}

/* Section heading — dark (light bg) */
.pi-section-heading-dark {
    color: var(--pi-text-dark);
}

/* Subtitle — on dark */
.pi-section-sub {
	font-family: var(--pi-font-bar);
    font-size: 17px;
    color: var(--pi-on-dark-mute);
    line-height: 1.55;
    margin: 0;
    max-width: 520px;
}

/* Subtitle — on light */
.pi-section-sub-dark {
    color: var(--pi-text-grey);
}

/* Gold highlight word inside a heading */
.pi-gold-semi-dark { color: var(--pi-gold-semi-dark) !important; }
.pi-gold-brighter { color: var(--pi-gold-brighter) !important; }
.pi-gold-light { color: var(--pi-gold-light) !important; }


/* ══════════════════════════════════════════════════
   SECTION 1 · HERO
══════════════════════════════════════════════════ */

.pi-hero {
    background: var(--pi-hero-bg);
    padding: 72px 0 64px;
}

/* Left copy column */
.pi-hero-headline {
    font-family: var(--pi-font-bar-con);
    font-size: 55px;
    font-weight: 700;
    line-height: 51px;
    letter-spacing: -0.5px;
    color: var(--pi-text-dark);
    text-transform: uppercase;
    margin: 0;
}

.pi-hero-body {
	font-family: var(--pi-font-bar);
    font-size: 18px;
    color: var(--pi-text-grey);
    line-height: 1.65;
    margin: 0;
    max-width: 400px;
}

.pi-hero-sub {
    font-size: 17px;
    color: #888;
    line-height: 1.8;
    margin: 0;
}

.pi-hero-btn {
	font-family: var(--pi-font-bar-con);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: var(--pi-gold-bright);
    color: var(--pi-text-dark);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s;
}

.pi-hero-btn:hover {
    background: var(--pi-gold);
    color: var(--pi-text-dark);
}

.pi-hero-btn-arrow, .pi-submit-btn-arrow {
	font-family: 'Inter', sans-serif;
    color: var(--pi-text-dark);
    font-size: 20px;
    line-height: 1;
    font-style: normal;
}

.pi-hero-btn:hover .pi-hero-btn-arrow {
	color: var(--pi-text-dark);
}

/* ── Player cards ───────────────────────────────── */

.pi-pop-card {
    background: var(--pi-light-card);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 28px rgba(0,0,0,.18);
	border: 1px solid #ECECEC;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.pi-pop-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,255,255,0.13) 50%,
        transparent 65%
    );
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 3;
    animation: pi-card-shine 0.7s ease forwards;
}

.pi-hero .col-6:nth-child(1) .pi-pop-card::before { animation-delay: 0.4s; }
.pi-hero .col-6:nth-child(2) .pi-pop-card::before { animation-delay: 1.2s; }

.pi-pop-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 18px 44px rgba(0,0,0,.25);
}

.pi-pop-card:hover::before {
    animation: pi-card-shine 0.7s 0.05s ease forwards;
}

@keyframes pi-card-shine {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.pi-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Stat chip badges */
.pi-stat-chip {
	margin: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.pi-chip-gold  {
	background: var(--pi-gold-bright);
	color: var(--pi-text-dark);
}
.pi-chip-blue  {
	background: #1661b8;
}
.pi-chip-green {
	background: #25833b;
}

/* Target score block */
.pi-target-block { flex-shrink: 0; margin: 5px 10px; }

.pi-target-val {
    font-family: var(--pi-font-bar);
    font-size: 22px;
    font-weight: 900;
    color: var(--pi-text-dark);
    line-height: 1;
    display: block;
	background: var(--pi-gold-bright);
	padding: 5px;
	border-radius: 4px;
}

.pi-target-lbl {
	font-family: var(--pi-font-bar);
    font-size: 12px;
    font-weight: 600;
    color: #717273;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
    display: block;
	text-align: center;
}

.pi-card-inner {
    background: #FEFEFE;
    border-radius: 14px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Player name + team */
.pi-player-section {
	background: url('curry.png') center top / cover no-repeat;
	height: 275px;
	margin: 10px 0 0 0;
	cursor: default;
}

.pi-player-section.mahomes {
	background: url('mahomes.png') center top / cover no-repeat;
}

.pi-player-name {
	font-family: var(--pi-font-bar);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #111;
	line-height: 1;
	margin: -15px 10px 3px 10px;
	cursor: default;
}

.pi-player-surname {
	font-size: 34px;
	color: var(--pi-gold-bright);
}

.pi-player-team {
	font-family: var(--pi-font-bar);
	font-size: 10px;
	color: #777;
	line-height: 1.45;
	margin: 0 10px;
	font-weight: 500;
}

.pi-player-abbr { color: #aaa; }

/* Payout table inside card */
.pi-payout-table {
	border: 1px solid #ebebeb;
	border-radius: 8px;
	overflow: hidden;
	font-size: 18px;
	margin: 0 10px 10px 10px;
	font-family: var(--pi-font-bar-con);
	cursor: default;
}

.pi-payout-head {
	display: flex;
	justify-content: space-between;
	background: #f0f0f0;
	padding: 4px 9px;
	font-size: 10px;
	font-weight: 700;
	color: #333;
}

.pi-payout-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 9px;
	border-bottom: 1px solid #f5f5f5;
	font-weight: 500;
	color: #333;
}

.pi-payout-row b {
	font-weight: 700;
}

.pi-row-last { border-bottom: none; }

.pi-val-hot {
	color: var(--pi-gold-bright);
	font-weight: 500;
}

.pi-payout-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 12px;
	cursor: default;
}

.pi-see-more {
	font-family: var(--pi-font-bar-con);
	font-size: 16px;
	font-weight: 600;
	color: #808080;
	cursor: pointer;
}

.pi-min-payout {
	font-family: var(--pi-font-bar-con);
	font-size: 16px;
	font-weight: 600;
	color: #808080;
}

.pi-min-payout-val {
	color: var(--pi-text-dark);
	letter-spacing: 0.02em;
	font-weight: 500 !important;
}

/* Card CTA button (sits at bottom of white inner) */
.pi-card-cta {
	font-family: var(--pi-font-bar);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--pi-gold-bright);
	color: var(--pi-text-dark);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-decoration: none;
	padding: 16px;
	border-radius: 0 0 9px 9px;
	margin: 6px -12px 0;
	text-align: center;
	transition: background .15s;
	line-height: 1;
}

.pi-card-cta strong { font-size: 24px; font-weight: 700; }

.pi-card-cta:hover {
	background: var(--pi-gold);
	color: var(--pi-text-dark);
}

.pi-card-cta svg { flex-shrink: 0; opacity: .7; }


/* ══════════════════════════════════════════════════
   SECTION 2 · HOW IT WORKS
══════════════════════════════════════════════════ */

.pi-how {
	background-color: var(--pi-dark);
	padding: 130px 0;
	position: relative;
}

.pi-how::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: 1600px;
	margin: 0 auto;
	background: url('pop-curry2.png') right top / auto 75% no-repeat;
	pointer-events: none;
}

.pi-how::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	max-width: 1600px;
	margin: 0 auto;
	background:
		linear-gradient(to right, var(--pi-dark) 0%, transparent 35%),
		linear-gradient(to top,   var(--pi-dark) 0%, transparent 22%);
	pointer-events: none;
}

.pi-how .container-xl {
	position: relative;
	z-index: 2;
}

.pi-how-graph-img {
	position: absolute;
	top: -125px;
	left: 60%;
	transform: translateX(-50%);
	pointer-events: none;
	height: auto;
}

.pi-how-card {
	background: var(--pi-dark-card);
	border-radius: 14px;
	padding: 30px 26px;
	cursor: default;
	border: 1.5px solid var(--pi-dark-card);
}

.pi-how-card:hover {
	border-color: var(--pi-gold);
	box-shadow: 0 4px 20px rgba(232,160,32,.12);
}

.pi-step-bar {
	width: 36px;
	height: 4px;
	background: var(--pi-gold-bright);
	border-radius: 2px;
	margin-bottom: 16px;
}

.pi-step-label {
	font-family: var(--pi-font-bar-con);
	font-size: 12px;
	font-weight: 700;
	color: var(--pi-gold-bright);
	letter-spacing: .095em;
	margin: 0 0 10px;
}

.pi-how-title {
	font-family: var(--pi-font-bar-con);
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	line-height: 1.2;
}

.pi-how-body {
	font-family: var(--pi-font-bar);
	font-size: 15px;
	color: #C4C4C0;
	line-height: 24px;
	margin: 0;
}


/* ══════════════════════════════════════════════════
   SECTION 3 · PRODUCT FEATURES
══════════════════════════════════════════════════ */

.pi-features {
	background: var(--pi-cream);
	padding: 88px 0;
}

.pi-feat-grid > [class*="col"] {
	display: flex;
}

.pi-feat-card {
	height: 100%;
	background: #fff;
	border: solid var(--pi-gold-light);
	border-radius: 14px;
	padding: 26px 24px;
	transition: border-color .18s, box-shadow .18s;
	border-width: 4px 1px 1px 1px;
	cursor: default;
}

.pi-feat-card:hover {
	border-color: var(--pi-gold);
	box-shadow: 0 4px 20px rgba(232,160,32,.12);
}

.pi-feat-title {
	font-family: var(--pi-font-bar-con);
	font-size: 20px;
	font-weight: 700;
	color: var(--pi-text-dark);
	margin: 0 0 10px;
	line-height: 1.2;
}

.pi-feat-body {
	font-family: var(--pi-font-bar);
	font-size: 15px;
	color: var(--pi-text-grey);
	line-height: 24px;
	margin: 0;
}

.pi-feat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 48px;
}

.pi-feat-header-left {
	flex: 0 0 auto;
	max-width: 60%;
}

.pi-feat-quote {
	font-family: var(--pi-font-bar);
	font-size: 32px;
	font-weight: 800;
	font-style: italic;
	color: var(--pi-text-dark) !important;
	line-height: 1.2;
	margin: 0;
	text-align: right;
	flex-shrink: 0;
	max-width: 380px;
}


/* ══════════════════════════════════════════════════
   SECTION 4 · FLEXIBLE DELIVERY
══════════════════════════════════════════════════ */

.pi-delivery {
	background: #fff;
	padding: 88px 0;
}

.pi-delivery-card {
	background: #fff;
	border: 1.5px solid var(--pi-grey-border);
	border-radius: 14px;
	padding: 30px 28px;
	transition: border-color .18s, box-shadow .18s;
	cursor: default;
}

.pi-delivery-card:hover {
	border-color: var(--pi-gold);
	box-shadow: 0 4px 20px rgba(232,160,32,.12);
}

.pi-option-label {
	font-family: var(--pi-font-bar-con);
	font-size: 11px;
	font-weight: 700;
	color: var(--pi-gold);
	letter-spacing: 0.165em;
	text-transform: uppercase;
	font-style: normal;
	margin: 0 0 10px;
}

.pi-delivery-title {
	font-family: var(--pi-font-bar-con);
	font-size: 22px;
	font-weight: 700;
	color: var(--pi-text-dark);
	margin: 0 0 14px;
	line-height: 1.2;
}

.pi-delivery-body {
	font-family: var(--pi-font-bar);
	font-size: 15px;
	color: var(--pi-text-grey);
	line-height: 25px;
	margin: 0;
}


/* ══════════════════════════════════════════════════
   SECTION 5 · GET STARTED / CONTACT
══════════════════════════════════════════════════ */

.pi-contact {
	background: var(--pi-dark);
	padding: 88px 0;
}

.pi-cta-heading {
	font-family: var(--pi-font-bar-con);
	font-size: 50px;
	font-weight: 700;
	color: #fff;
	line-height: 1.05;
	margin: 0 0 18px;
}

.pi-contact-sub {
	font-family: var(--pi-font-bar);
	font-size: 17px;
	color: var(--pi-on-dark-light);
	line-height: 1.6;
	margin: 0;
}

/* Bullet list */
.pi-bullet-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pi-bullet-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.pi-bullet-dot {
	width: 10px;
	height: 10px;
	min-width: 10px;
	background: var(--pi-gold-light);
	border-radius: 50%;
	margin-top: 5px;
	display: block;
}

.pi-bullet-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 5px;
}

.pi-bullet-body {
	font-family: var(--pi-font-bar);
	font-size: 15px;
	color: var(--pi-on-dark-light);
	line-height: 24px;
	margin: 0;
}

/* Enquiry form */
.pi-form-label {
	font-family: var(--pi-font-bar-con);
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--pi-on-dark-light);
	letter-spacing: .165em;
	margin-bottom: 7px;
}

.pi-form-input {
	display: block;
	width: 100%;
	background: #252525;
	border: 1px solid #333;
	border-radius: 7px;
	color: #fff;
	font-family: var(--pi-font-body);
	font-size: 14px;
	padding: 12px 15px;
	outline: none;
	transition: border-color .15s, background .15s;
	-webkit-appearance: none;
}

.pi-form-input::placeholder { color: rgba(255,255,255,.22); }

.pi-form-input:focus {
	border-color: var(--pi-gold);
	background: rgba(255,255,255,.10);
}

.pi-textarea {
	resize: vertical;
	min-height: 110px;
}

.pi-submit-btn {
	font-family: var(--pi-font-bar-con);
	display: block;
	width: 100%;
	background: var(--pi-gold-quarter-dark);
	color: #030300;
	border: none;
	border-radius: 6px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 15px;
	cursor: pointer;
	transition: background .15s, transform .1s;
}

.pi-submit-btn:hover {
	background: #FFE22A;
	transform: translateY(-1px);
}

.pi-submit-btn:active {
	transform: translateY(0);
}

/* ══════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════ */

.pi-navbar {
	background: #fff;
	border-bottom: 1px solid #EBEBEB;
	padding: 14px 0;
	position: sticky;
	top: 0;
	z-index: 9999;
}

.pi-navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.pi-navbar-brand img {
	height: 36px;
	width: auto;
}

.pi-navbar-divider {
	display: block;
	width: 1px;
	height: 24px;
	background: #D0D0D0;
	flex-shrink: 0;
}

.pi-navbar-company {
	font-family: var(--pi-font-bar-con);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #999;
}

.pi-nav-cta {
	font-family: var(--pi-font-bar-con);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--pi-gold-bright);
	color: var(--pi-text-dark);
	text-decoration: none;
	border-radius: 4px;
	padding: 9px 20px;
	transition: background .15s;
	white-space: nowrap;
}

.pi-nav-cta:hover {
	background: var(--pi-gold);
	color: var(--pi-text-dark);
}

/* ══════════════════════════════════════════════════
   SITE FOOTER
══════════════════════════════════════════════════ */

.pi-site-footer {
	background: #fff;
	border-top: 1px solid #EBEBEB;
	padding: 20px 0;
}

.pi-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pi-footer-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.pi-footer-main-link {
	white-space: nowrap;
}

.pi-footer-logo-img {
	height: 28px;
	width: auto;
}

.pi-footer-copy {
	font-family: var(--pi-font-bar-con);
	font-size: 13px;
	color: #aaa;
	margin: 0;
}

.pi-footer-main-link {
	font-family: var(--pi-font-bar-con);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #aaa;
	text-decoration: none;
	transition: color .15s;
}

.pi-footer-main-link:hover {
	color: var(--pi-text-dark);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */

@media (max-width: 991px) {
	.pi-hero { padding: 52px 0 44px; }

	.pi-hero-headline { font-size: clamp(38px, 8vw, 60px); }

	.pi-how,
	.pi-features,
	.pi-delivery,
	.pi-contact { padding: 64px 0; }
}

@media (max-width: 767px) {
	.pi-hero { padding: 40px 0 36px; }

	.pi-hero-headline { font-size: clamp(36px, 10vw, 52px); }

	.pi-how,
	.pi-features,
	.pi-delivery,
	.pi-contact { padding: 52px 0; }

	/* Hide curry background on mobile */
	.pi-how::before { display: none; }

	/* Graph image: pull out of absolute, flow it between subtitle and cards */
	.pi-how-graph-img {
		position: static;
		transform: none;
		display: block;
		width: 100%;
		max-width: 360px;
		margin: 0 auto 32px;
	}

	/* Stack the two hero cards vertically */
	.pi-hero .col-6 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}

	.pi-pop-card { max-width: 400px; margin: 0 auto; }

	.pi-player-name { font-size: 18px; }

	.pi-section-heading,
	.pi-section-heading-dark { font-size: clamp(30px, 7vw, 44px); }

	.pi-cta-heading { font-size: clamp(28px, 7vw, 42px); }
}

@media (max-width: 480px) {
	.pi-hero-headline { font-size: clamp(32px, 11vw, 48px); }

	.pi-how-card,
	.pi-feat-card,
	.pi-delivery-card { padding: 22px 18px; }
}