/* =========================================================
   Dialpad — brand theme
   Layered on top of the Stellar base (assets/css/main.css)
   ========================================================= */


:root{
	--brand:        #5653E8;
	--brand-2:      #7A78F0;
	--brand-dark:   #211F5B;
	--brand-darker: #15133D;
	--ink:          #17153F;
	--ink-soft:     #55527E;
	--paper:        #F6F5FC;
	--paper-alt:    #EDEBFA;
	--line:         rgba(23,21,63,0.12);

	--gold:         #C8892A;
	--gold-ink:     #7A5312;
	--gold-bg:      #FBF0DA;
	--gold-line:    #E7C480;

	--diamond:      #1AA6A0;
	--diamond-ink:  #0E6864;
	--diamond-bg:   #DEF6F4;
	--diamond-line: #8FDAD5;
}

/* ---------- Type ---------- */
body, input, textarea, select{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
	color: var(--ink);
}
h1, h2, h3, h4, h5{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
	letter-spacing: -0.015em;
	font-weight: 600;
}
header.major h2{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 1.4em;
	font-weight: 500;
}
.mono, .number-display, .ref-code{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace;
}


/* ---------- Header / Hero ---------- */
html{
	background: linear-gradient(to bottom, #15133D 0%, #211F5B 12%, #1AA6A0 30%, #1AA6A0 65%, #E85D75 80%, #15133D 100%) no-repeat scroll;
	background-size: 100% 100%;
	min-height: 100%;
}
body{
	margin: 0;
	padding: 0;
	background: none;
}
#main{
	border-radius: 12px 12px 12px 12px;
	overflow: hidden;
}
#main > .main{
	padding: 2.5em 3em 2.5em 3em !important;
}
#header{
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4em 2em 2em 2em;
	background: transparent !important;
}
#header:before{ display:none; }

.logo-section{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.6em;
	margin-bottom:1.5em;
}
.logo-img{
	width:3.6em;
	height:3.6em;
	display:block;
}
.logo-text{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
	font-size:3.2em;
	font-weight:600;
	color:#ffffff;
	letter-spacing:-0.01em;
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.brand-mark{
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.brand-mark img{ width:100%; height:auto; display:block; }

#header h1{
	font-weight: 700;
	font-size: 2.6em;
	color: #fff;
}
#header p{
	color: rgba(255,255,255,0.78);
	font-size: 1.15em;
	max-width: 34em;
}
#header .eyebrow{
	display:inline-flex;
	align-items:center;
	gap:0.5em;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace;
	font-size: 0.72em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #C9C7FF;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	padding: 0.55em 1em;
	border-radius: 999px;
	margin-bottom: 1.4em;
}
.dot3{
	display:inline-grid;
	grid-template-columns: repeat(3, 5px);
	grid-auto-rows: 5px;
	gap: 3px;
}
.dot3 span{ width:5px; height:5px; border-radius:50%; background: currentColor; opacity:0.9; }

/* Non-homepage headers (shorter, page-title style) */
#header.alt-page{ padding: 5em 2em 4.5em 2em; }
#header.alt-page h1{ font-size: 2.1em; }

/* ---------- Nav ---------- */
#nav{ background: rgba(21,19,61,0.92); backdrop-filter: blur(6px); }
#nav.alt {
	background-color: rgba(21,19,61,0.95) !important;
	backdrop-filter: blur(6px);
}
#nav ul li a{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; letter-spacing: 0.01em; color: rgba(255,255,255,0.7); }
#nav ul li a:before{ background: var(--brand-2) !important; }
#nav ul li a.active{
	color:#fff !important;
	background-color: transparent !important;
	border-left: 2px solid #fff !important;
	border-right: 2px solid #fff !important;
	border-radius: 0 !important;
	padding-left: 0.8em !important;
	padding-right: 0.8em !important;
}
#nav .nav-cta{
	color:#fff !important;
	background: #E85D75 !important;
	border-radius: 8px !important;
	padding: 0 1.3em !important;
	margin-left: 0.5em;
	height: 2.25em;
	line-height: 2.25em;
	display: inline-block !important;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
}
#nav .nav-cta:before{ display:none !important; }

/* ---------- Buttons ---------- */
.button{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
	border-radius: 8px !important;
	font-weight: 600;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
	transition: all 0.2s ease;
}
.button.primary{
	background-color: #E85D75 !important;
	color: #ffffff !important;
}
.button.primary:hover{
	background-color: #d64563 !important;
	box-shadow: 0 12px 24px rgba(232,93,117,0.35) !important;
}
.button.gold{
	background-color: var(--gold) !important;
	color: #fff !important;
}
.button.ghost-light{
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.45) !important;
	color:#fff !important;
}
.button.ghost-light:hover{ background: rgba(255,255,255,0.1) !important; }
.button.small{ font-size:0.8em; padding: 0 1.4em; height: 2.4em; line-height: 2.4em; }

/* ---------- Section accents ---------- */
#main > .main:nth-child(2n){ background-color: var(--paper-alt); }

.section-eyebrow{
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace;
	font-size:0.75em;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color: var(--brand);
	margin-bottom: 0.6em;
	display:block;
}

/* ---------- Feature icons recolour ---------- */
.icon.major{
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}
.icon.major:before{
	border: none !important;
	border-radius: 0 !important;
	font-size: 4rem !important;
}
.icon.major.style1{ color: var(--brand); }
.icon.major.style3{ color: var(--gold); }
.icon.major.style5{ color: var(--diamond); }
ul.statistics li.style1 .icon{ color: var(--brand); }
ul.statistics li.style2 .icon{ color: var(--gold); }
ul.statistics li.style3 .icon{ color: var(--diamond); }
ul.statistics li.style4 .icon{ color: var(--brand-2); }
ul.statistics li.style5 .icon{ color: var(--ink-soft); }

/* =========================================================
   Number cards (browse page)
   ========================================================= */
.filter-bar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap: 1em;
	margin-bottom: 2em;
	padding-bottom: 1.4em;
	border-bottom: 1px solid var(--line);
}
.filter-bar .counts{ font-size:0.85em; color: var(--ink-soft); }
.tier-key{ display:flex; gap:1.4em; flex-wrap:wrap; font-size:0.85em; color:var(--ink-soft); }
.tier-key span{ display:inline-flex; align-items:center; gap:0.5em; }
.tier-key .swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.swatch.gold{ background: var(--gold); }
.swatch.diamond{ background: var(--diamond); }

.numbers-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25em;
	margin: 0 0 2em 0;
}
@media screen and (max-width: 980px){ .numbers-grid{ grid-template-columns: repeat(2,1fr); } }
/* ---------- Mobile (≤ 736px) ---------- */
@media screen and (max-width: 736px){
	#header{
		padding: 2em 1em 1em 1em;
	}
	.logo-img{
		width: 1em;
		height: 1em;
	}
	.logo-text{
		font-size: 1em;
	}
	#main > .main{
		padding: 1.5em 1.5em 1.5em 1.5em !important;
	}
	#header h1{
		font-size: 1.8em;
	}
	#header p{
		font-size: 0.95em;
	}
	.numbers-grid{ grid-template-columns: 1fr; }
	.dial-graphic svg{ width: 6em; height: 6em; }
	.statistics{
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: 0.8em;
		margin: 0 auto 2em auto !important;
		padding: 0 1em;
	}
	.statistics li{
		border-radius: 0 !important;
		padding: 1em 0.8em !important;
	}
	.statistics li:first-child, .statistics li:last-child{
		border-radius: 0 !important;
	}
	.statistics li .icon{
		margin: 0 0 0.8em 0 !important;
	}
	.statistics li .icon:before{
		font-size: 2rem !important;
		width: 1.75em !important;
		height: 1.75em !important;
		line-height: 1.7em !important;
	}
	.statistics li strong, .statistics li b{
		font-size: 1.5em !important;
	}
	.statistics li p{
		font-size: 0.85em !important;
	}
}

.number-card{
	position:relative;
	background:#fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.6em 1.5em 1.5em 1.5em;
	display:flex;
	flex-direction:column;
	gap: 1em;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	opacity:0;
	transform: translateY(8px);
	animation: cardIn 0.45s ease forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }
.number-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(23,21,63,0.1);
	border-color: rgba(86,83,232,0.35);
}
.number-card.diamond{ border-color: var(--diamond-line); background: linear-gradient(180deg, #ffffff 0%, var(--diamond-bg) 220%); }
.number-card.gold{ border-color: var(--gold-line); }

.number-card .top-row{ display:flex; align-items:center; justify-content:space-between; }
.tier-badge{
	display:inline-flex;
	align-items:center;
	gap:0.45em;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace;
	font-size:0.68em;
	letter-spacing:0.1em;
	text-transform:uppercase;
	padding: 0.4em 0.75em;
	border-radius: 999px;
	font-weight:600;
}
.tier-badge.gold{ background: var(--gold-bg); color: var(--gold-ink); }
.tier-badge.diamond{ background: var(--diamond-bg); color: var(--diamond-ink); }
.tier-badge .dot3{ color: currentColor; }

.number-card .pattern-note{ font-size:0.72em; color: var(--ink-soft); }

.number-display{
	font-size: 1.55em;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: 0.01em;
}

.number-card .select-btn{ margin-top: auto; }

.browse-actions{
	display:flex;
	justify-content:center;
	margin: 1em 0 0.5em 0;
}

/* Loading / shuffle state */
.numbers-grid.is-loading .number-card{ animation: none; opacity:0.35; filter: blur(1px); transition: opacity 0.15s ease, filter 0.15s ease; }

/* =========================================================
   Checkout flow
   ========================================================= */
.selected-number-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:1em;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 1.1em 1.4em;
	margin-bottom: 2em;
}
.selected-number-bar .label{ font-size:0.75em; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace; }
.selected-number-bar .number-display{ font-size:1.3em; }

.stepper{
	display:flex;
	gap: 0.75em;
	margin-bottom: 2.4em;
	flex-wrap:wrap;
}
.stepper .step{
	display:flex;
	align-items:center;
	gap:0.6em;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace;
	font-size:0.78em;
	color: var(--ink-soft);
	padding: 0.5em 0.9em 0.5em 0.6em;
	border-radius:999px;
	border:1px solid var(--line);
	background:#fff;
}
.stepper .step .num{
	width:1.6em; height:1.6em; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background: var(--paper-alt); color: var(--ink-soft); font-weight:600;
}
.stepper .step.active{ border-color: var(--brand); color: var(--ink); }
.stepper .step.active .num{ background: var(--brand); color:#fff; }
.stepper .step.done .num{ background: var(--diamond); color:#fff; }
.stepper .step.done{ color: var(--ink); }

.checkout-panel{ display:none; }
.checkout-panel.active{ display:block; animation: cardIn 0.35s ease forwards; }

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.5em; }
.form-grid .field.full{ grid-column: 1 / -1; }
@media screen and (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }

.field{ margin-bottom: 1.4em; }
.field label{ display:block; font-size:0.82em; font-weight:600; margin-bottom:0.5em; color: var(--ink); }
.field .hint{ display:block; font-size:0.75em; color: var(--ink-soft); margin-top:0.4em; }

.summary-box{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding: 1.6em 1.7em;
	margin-bottom:1.6em;
}
.summary-box h3{ margin-bottom:0.6em; }
.summary-row{ display:flex; justify-content:space-between; padding:0.55em 0; border-bottom:1px dashed var(--line); font-size:0.92em; }
.summary-row:last-child{ border-bottom:none; }
.summary-row .k{ color:var(--ink-soft); }
.summary-row .v{ font-weight:600; }

.bank-box{
	background: var(--paper-alt);
	border: 1px solid var(--line);
	border-radius:14px;
	padding: 1.7em 1.8em;
	margin-bottom:1.8em;
}
.bank-row{ display:flex; justify-content:space-between; align-items:center; padding:0.6em 0; border-bottom:1px solid var(--line); }
.bank-row:last-child{ border-bottom:none; }
.bank-row .k{ font-size:0.78em; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace; }
.bank-row .v{ font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', monospace, monospace; font-weight:600; font-size:1.02em; }
.ref-code{ background:#fff; border:1px dashed var(--brand); color:var(--brand); padding:0.15em 0.6em; border-radius:6px; }

.notice{
	display:flex;
	gap:0.9em;
	align-items:flex-start;
	background: var(--gold-bg);
	border:1px solid var(--gold-line);
	color: var(--gold-ink);
	border-radius:12px;
	padding:1em 1.2em;
	font-size:0.88em;
	margin-bottom:1.6em;
}
.notice.brand{ background: #EEEDFC; border-color:#C9C7F5; color:var(--brand-dark); }
.notice .icon{ margin-top:0.15em; }

.confirm-hero{ text-align:center; padding: 1em 0 0.5em 0; }
.confirm-hero .check-circle{
	width:4.4em; height:4.4em; border-radius:50%;
	background: var(--diamond-bg); color: var(--diamond-ink);
	display:flex; align-items:center; justify-content:center;
	margin: 0 auto 1em auto; font-size:1.6em;
}

/* Error / validation */
.field.error input, .field.error select, .field.error textarea{ border-color:#D14343 !important; }
.field .error-msg{ display:none; color:#D14343; font-size:0.78em; margin-top:0.4em; }
.field.error .error-msg{ display:block; }

/* ---------- Spotlight dial graphic ---------- */
.spotlight .image.dial-graphic{
	border-color: var(--line);
	background: var(--paper-alt);
}
.dial-graphic svg{ display:block; width:8em; height:8em; }

/* ---------- Process list (How it works) ---------- */
.process-list{ display:flex; flex-direction:column; gap:1.8em; max-width:44em; margin:0 auto; }
.process-list li{ display:flex; gap:1.4em; align-items:flex-start; }
.process-num{
	flex:none;
	width:2.4em; height:2.4em; border-radius:50%;
	background: var(--brand); color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; font-weight:700;
}
.process-list h3{ margin-bottom:0.3em; }
.process-list p{ color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:46em; margin:0 auto; }
.faq-list h3{ margin-top:1.6em; margin-bottom:0.4em; font-size:1.15em; }
.faq-list h3:first-child{ margin-top:0; }
.faq-list p{ color: var(--ink-soft); }

/* ---------- Footer trust row ---------- */
.trust-row{
	display:flex;
	flex-wrap:wrap;
	gap: 1.6em;
	margin-top: 1.2em;
}
.trust-row li{ display:flex; align-items:center; gap:0.6em; font-size:0.85em; color: #ffffff; font-weight: 500; }

/* ---------- Footer ---------- */
#footer{
	background: none;
	color: rgba(255,255,255,0.85);
}
#footer h2{ color: #ffffff; }
#footer a{ color: #ffffff; }
#footer .copyright{ color: rgba(255,255,255,0.65); }

/* ---------- Misc ---------- */
.text-muted{ color: var(--ink-soft); }
.center{ text-align:center; }
.max-content{ max-width:44em; margin:0 auto; }