/* =============================================================================
   Coin hero - homepage-style two-column intro on every coin/voucher page:
   copy (eyebrow - H1 with highlighted coin name - intro - perks - CTA) on the
   start side, a live Toman ⇄ coin converter console on the other.

   Self-contained --ddci-* tokens (works on any theme) + Dracula dark mode via
   html[data-dracula-scheme="dark"]. Perf rules baked in: no filter/backdrop
   blur anywhere, every animation is transform/opacity only (compositor-only),
   and the H1 (LCP) is never held at opacity:0.
   ========================================================================== */
.dd-cointro--duo{
	--ddci-gold:#e0a300;
	--ddci-gold2:#fdb837;
	--ddci-grad:linear-gradient(135deg,#fdb837 0%,#ffc53d 48%,#e0a300 100%);
	--ddci-ink:#26262f;
	--ddci-muted:#565d6b;
	--ddci-tile:rgba(255,255,255,.68);
	--ddci-card-brd:rgba(224,163,0,.22);
	--ddci-hair:rgba(224,163,0,.4);
	--ddci-up:#1ea97c;
	--ddci-radius:26px;
	--ddci-shadow:0 1px 2px rgba(120,90,0,.05),0 24px 50px -30px rgba(170,125,0,.5);

	position:relative;
	box-sizing:border-box;
	width:100vw !important;
	max-width:100vw !important;
	margin:0 calc(50% - 50vw) clamp(26px,3vw,42px) !important;
	padding:clamp(16px,2.4vw,38px) clamp(16px,4vw,40px) clamp(22px,3vw,46px);
	text-align:right;
	color:var(--ddci-ink);
	overflow:hidden;
	isolation:isolate;
}

html[data-dracula-scheme="dark"] .dd-cointro--duo{
	--ddci-ink:#f0f0f5;
	--ddci-muted:#a7abbd;
	--ddci-tile:rgba(255,255,255,.055);
	--ddci-card-brd:rgba(255,197,61,.2);
	--ddci-hair:rgba(255,197,61,.34);
	--ddci-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 50px -30px rgba(0,0,0,.8);
}

/* legacy hook: coin pages carry body.dd-hero (theme title suppressed) */
.dd-hero .dd-cointro--duo{margin-top:0 !important;}

/* ---- seamless hand-off into the coin box that follows --------------------
   The hero's ambient art used to be hard-clipped by overflow:hidden at the
   section edge (a visible seam). When a .dd-coinbox is the next sibling:
   close the gap, fade the ambient art out near the bottom, and ramp the
   section's own wash up to exactly the alpha the coin box's top wash starts
   at (--ddci-handoff, mirrored by .dd-coinbox::before) so the two meet flush
   with no step line between the sections. */
.dd-cointro--duo{--ddci-handoff:rgba(253,184,55,.085);}
html[data-dracula-scheme="dark"] .dd-cointro--duo{--ddci-handoff:rgba(253,184,55,.06);}

.dd-cointro--duo:has(+ .dd-coinbox){
	margin-bottom:0 !important;
	background:linear-gradient(180deg,transparent 38%,var(--ddci-handoff) 100%);
}
.dd-cointro--duo:has(+ .dd-coinbox) .dd-cointro__bg{
	-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
	mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
}

/* ---- ambient background: pre-softened gradients, NO blur filter ---------- */
.dd-cointro__bg{
	position:absolute;inset:0;z-index:0;pointer-events:none;
	contain:layout paint style;
}
.dd-cointro__aura{
	position:absolute;top:-30%;right:-10%;width:58%;height:86%;
	border-radius:50%;
	background:
		radial-gradient(closest-side,rgba(253,184,55,.22),rgba(253,184,55,.09) 45%,rgba(253,184,55,.03) 68%,transparent 80%);
}
.dd-cointro__aura--b{
	top:auto;right:auto;bottom:-42%;left:-12%;width:52%;height:78%;opacity:.65;
}
.dd-cointro__mesh{
	position:absolute;inset:0;opacity:.5;
	background-image:
		linear-gradient(rgba(224,190,0,.09) 1px,transparent 1px),
		linear-gradient(90deg,rgba(224,190,0,.09) 1px,transparent 1px);
	background-size:46px 46px;
	-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 0%,transparent 72%);
	mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 0%,transparent 72%);
}
html[data-dracula-scheme="dark"] .dd-cointro__aura{
	background:radial-gradient(closest-side,rgba(253,184,55,.13),rgba(253,184,55,.05) 45%,transparent 78%);
}

/* ---- two columns ---------------------------------------------------------- */
.dd-cointro__cols{
	position:relative;z-index:1;
	max-width:1180px;
	margin-inline:auto;
	display:grid;
	grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
	gap:clamp(24px,3.5vw,54px);
	align-items:center;
}

/* ---- copy column ----------------------------------------------------------- */
/* everything in the copy column is centre-aligned at every width */
.dd-cointro__copy{text-align:center;}

.dd-cointro__eyebrow{
	display:inline-flex;align-items:center;gap:9px;
	padding:7px 15px;border-radius:999px;
	font-size:.82rem;font-weight:700;letter-spacing:.2px;line-height:1.7;
	color:var(--ddci-gold);
	background:linear-gradient(120deg,rgba(253,184,55,.14),rgba(224,190,0,.08));
	border:1px solid var(--ddci-hair);
}
html[data-dracula-scheme="dark"] .dd-cointro__eyebrow{color:var(--ddci-gold2);}

.dd-cointro__livedot{
	position:relative;flex:0 0 auto;
	width:8px;height:8px;border-radius:50%;
	background:var(--ddci-up);
}
/* ping = transform/opacity ring (compositor-only, never a box-shadow anim) */
.dd-cointro__livedot::after{
	content:"";position:absolute;inset:0;border-radius:50%;
	background:rgba(30,169,124,.5);
	will-change:transform,opacity;
	animation:ddci-ping2 2.2s ease-out infinite;
	pointer-events:none;
}
@keyframes ddci-ping2{
	0%{transform:scale(1);opacity:.7;}
	70%,100%{transform:scale(3.2);opacity:0;}
}

.dd-cointro__h1{
	position:relative;z-index:1;
	margin:16px 0 12px !important;
	font-size:clamp(1.55rem,1.05rem + 2.3vw,2.6rem) !important;
	font-weight:800 !important;
	line-height:1.4 !important;
	letter-spacing:-.3px;
	color:var(--ddci-ink);
	text-wrap:balance;
}
.dd-cointro__h1 em{
	font-style:normal;
	background:var(--ddci-grad);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	position:relative;
}
/* hand-drawn gold wavy underline under the coin name (same as the homepage) */
.dd-cointro__h1 em::after{
	content:"";
	position:absolute;right:2%;left:2%;bottom:-.14em;height:.32em;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 14" preserveAspectRatio="none"><path d="M3 10 C 30 3, 60 12, 117 5" fill="none" stroke="%23fdb837" stroke-width="4.5" stroke-linecap="round" opacity=".85"/></svg>') no-repeat center / 100% 100%;
	pointer-events:none;
}

.dd-cointro__text{
	max-width:34em;
	margin-inline:auto;
	font-size:clamp(.98rem,1.3vw,1.08rem);line-height:2;font-weight:500;
	color:var(--ddci-muted);
}
.dd-cointro__text p{margin:0 0 .6em;}
.dd-cointro__text p:last-child{margin-bottom:0;}
.dd-cointro__text strong,
.dd-cointro__text b{color:var(--ddci-ink);font-weight:700;}
.dd-cointro__text a{
	color:var(--ddci-gold);font-weight:700;text-decoration:none;
	border-bottom:1px solid rgba(224,163,0,.42);
	transition:border-color .2s ease;
}
.dd-cointro__text a:hover{border-bottom-color:var(--ddci-gold);}
html[data-dracula-scheme="dark"] .dd-cointro__text a{color:var(--ddci-gold2);}

/* ---- benefit chips ---------------------------------------------------------- */
.dd-cointro__perks{
	position:relative;z-index:1;
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:8px 10px;margin:16px 0 0;
}
.dd-cointro__perk{
	display:inline-flex;align-items:center;gap:6px;
	padding:7px 13px;border-radius:999px;
	font-size:.8rem;font-weight:700;line-height:1.6;
	color:var(--ddci-ink);
	background:var(--ddci-tile);
	border:1px solid var(--ddci-card-brd);
}
.dd-cointro__perk svg{width:15px;height:15px;flex:0 0 auto;color:var(--ddci-gold);}
html[data-dracula-scheme="dark"] .dd-cointro__perk svg{color:var(--ddci-gold2);}

/* ---- CTA -------------------------------------------------------------------- */
.dd-cointro__ctawrap{
	position:relative;z-index:1;
	display:flex;align-items:center;justify-content:center;
	margin-top:20px;
}
.dd-cointro__signup{max-width:330px;width:100%;}

/* =============================================================================
   Converter console (mirrors the homepage .dd-conv, plugin-local classes)
   ========================================================================== */
.dd-conv2{
	position:relative;
	border-radius:var(--ddci-radius);
	padding:clamp(18px,2.4vw,26px);
	background:
		linear-gradient(165deg,rgba(255,255,255,.94),rgba(255,250,235,.82)) padding-box,
		linear-gradient(160deg,rgba(253,184,55,.85),rgba(224,190,0,.25) 45%,rgba(253,184,55,.7)) border-box;
	border:1.6px solid transparent;
	box-shadow:var(--ddci-shadow);
	/* no backdrop-filter on purpose - the bg is ~92% opaque and a big blurred
	   backdrop region costs GPU time every frame the page moves */
}
html[data-dracula-scheme="dark"] .dd-conv2{
	background:
		linear-gradient(165deg,rgba(34,33,26,.94),rgba(22,22,18,.88)) padding-box,
		linear-gradient(160deg,rgba(253,184,55,.6),rgba(224,190,0,.16) 45%,rgba(253,184,55,.45)) border-box;
}

.dd-conv2__head{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	margin-bottom:15px;
}
.dd-conv2__title{
	display:inline-flex;align-items:center;gap:9px;
	font-size:1rem;font-weight:800;line-height:1.5;
	color:var(--ddci-ink);
}
.dd-conv2__ic{
	display:grid;place-items:center;flex:0 0 auto;
	width:34px;height:34px;border-radius:11px;
	color:#241c00;
	background:var(--ddci-grad);
	box-shadow:0 8px 18px -8px rgba(224,190,0,.8);
}
.dd-conv2__live{
	display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
	font-size:.74rem;font-weight:700;
	color:var(--ddci-up);
}
.dd-conv2__live i{
	position:relative;
	width:7px;height:7px;border-radius:50%;
	background:var(--ddci-up);
}
.dd-conv2__live i::after{
	content:"";position:absolute;inset:0;border-radius:50%;
	background:rgba(30,169,124,.5);
	will-change:transform,opacity;
	animation:ddci-ping2 2.2s ease-out infinite;
	pointer-events:none;
}

/* buy / sell tabs */
.dd-conv2__tabs{
	position:relative;
	display:grid;grid-template-columns:1fr 1fr;
	padding:4px;border-radius:14px;
	background:var(--ddci-tile);
	border:1px solid var(--ddci-card-brd);
	margin-bottom:16px;
}
.dd-conv2__tab{
	position:relative;z-index:1;
	appearance:none;border:0;background:transparent;
	padding:9px 6px;border-radius:11px;
	font-family:inherit;font-size:.92rem;font-weight:800;
	color:var(--ddci-muted);
	cursor:pointer;
	transition:color .2s ease;
}
.dd-conv2__tab.is-on{color:#241c00;}
.dd-conv2__tabglow{
	position:absolute;top:4px;bottom:4px;right:4px;
	width:calc(50% - 4px);border-radius:11px;
	background:var(--ddci-grad);
	box-shadow:0 6px 16px -6px rgba(224,190,0,.8);
	transition:transform .3s cubic-bezier(.3,.9,.3,1.1);
	pointer-events:none;
}
.dd-conv2--sell .dd-conv2__tabglow{transform:translateX(-100%);}

/* fields */
.dd-conv2__field{display:block;}
.dd-conv2__lbl{
	display:block;
	font-size:.76rem;font-weight:700;
	color:var(--ddci-muted);
	margin:0 4px 7px;
}
.dd-conv2__box{
	display:flex;align-items:center;gap:10px;
	padding:4px 14px;border-radius:14px;
	background:var(--ddci-tile);
	border:1px solid var(--ddci-card-brd);
	transition:border-color .2s ease,box-shadow .2s ease;
}
.dd-conv2__box:focus-within{
	border-color:var(--ddci-gold2);
	box-shadow:0 0 0 3px rgba(253,184,55,.18);
}
.dd-conv2__in,
.dd-conv2__out{
	flex:1;min-width:0;
	appearance:none;
	border:0 !important;outline:none !important;background:transparent !important;
	font-family:inherit;font-size:1.2rem;font-weight:800;
	color:var(--ddci-ink);
	padding:9px 0 !important;margin:0 !important;box-shadow:none !important;
	text-align:right;direction:rtl;
}
.dd-conv2__out{display:block;}
.dd-conv2__box--out{
	background:linear-gradient(120deg,rgba(253,184,55,.1),rgba(224,190,0,.05));
}
.dd-conv2__unit{
	flex:none;
	font-size:.78rem;font-weight:800;
	color:var(--ddci-muted);
	padding:5px 11px;border-radius:999px;
	background:rgba(255,255,255,.8);
	border:1px solid var(--ddci-card-brd);
	white-space:nowrap;
	max-width:10em;
	overflow:hidden;
	text-overflow:ellipsis;
}
html[data-dracula-scheme="dark"] .dd-conv2__unit{background:rgba(255,255,255,.08);}
.dd-conv2__unit--gold{
	color:var(--ddci-gold);
	border-color:var(--ddci-hair);
	background:linear-gradient(120deg,rgba(253,184,55,.16),rgba(224,190,0,.08));
}
html[data-dracula-scheme="dark"] .dd-conv2__unit--gold{color:var(--ddci-gold2);}

/* swap button */
.dd-conv2__swap{
	appearance:none;
	display:grid;place-items:center;
	width:40px;height:40px;margin:9px auto;
	border-radius:50%;
	border:1px solid var(--ddci-hair);
	background:rgba(255,255,255,.85);
	color:var(--ddci-gold);
	cursor:pointer;
	box-shadow:0 8px 18px -10px rgba(154,125,0,.55);
	transition:transform .35s cubic-bezier(.3,.9,.3,1.2),box-shadow .2s ease;
}
.dd-conv2__swap.is-spun{transform:rotate(180deg);}
html[data-dracula-scheme="dark"] .dd-conv2__swap{background:rgba(255,255,255,.08);color:var(--ddci-gold2);}

/* rate line */
.dd-conv2__rate{
	margin:14px 4px !important;
	font-size:.84rem;
	color:var(--ddci-muted);
}
.dd-conv2__rate b{color:var(--ddci-ink);font-weight:800;}
[data-ddcb-conv-rate].ddci-flash{animation:ddci-flash .8s ease;}
@keyframes ddci-flash{0%{opacity:.25;}100%{opacity:1;}}

/* ready-to-trade liquidity strip (merged in from the old coin-box panel) */
.dd-conv2__stock{
	display:flex;align-items:center;gap:9px;flex-wrap:wrap;
	margin-top:13px;
	padding:11px 14px;border-radius:14px;
	font-size:.8rem;font-weight:600;
	color:var(--ddci-muted);
	background:linear-gradient(120deg,rgba(253,184,55,.13),rgba(224,190,0,.05));
	border:1px solid var(--ddci-hair);
}
.dd-conv2__stocktxt b{color:var(--ddci-ink);font-weight:800;}
.dd-conv2__stockdot{
	position:relative;flex:0 0 auto;
	width:8px;height:8px;border-radius:50%;
	background:var(--ddci-up);
}
.dd-conv2__stockdot::after{
	content:"";position:absolute;inset:0;border-radius:50%;
	background:rgba(30,169,124,.5);
	will-change:transform,opacity;
	animation:ddci-ping2 2.2s ease-out infinite;
	pointer-events:none;
}
.dd-conv2__stockbadge{
	margin-inline-start:auto;
	font-size:.7rem;font-weight:800;color:#241c00;
	background:var(--ddci-grad);
	padding:4px 11px;border-radius:999px;
	box-shadow:0 6px 14px -8px rgba(224,163,0,.9);
	white-space:nowrap;
}

/* console CTA */
.dd-conv2__cta{
	display:flex;align-items:center;justify-content:center;gap:9px;
	width:100%;box-sizing:border-box;
	padding:14px 18px;border-radius:15px;
	font-size:1rem;font-weight:800;
	color:#241c00 !important;
	text-decoration:none !important;
	background:var(--ddci-grad);
	box-shadow:0 14px 32px -12px rgba(224,190,0,.8),inset 0 1px 0 rgba(255,255,255,.5);
	transition:transform .2s ease,box-shadow .2s ease;
}
.dd-conv2__cta:hover{
	transform:translateY(-2px);
	box-shadow:0 20px 42px -14px rgba(224,190,0,.95),inset 0 1px 0 rgba(255,255,255,.5);
}
.dd-conv2__cta svg{transition:transform .25s ease;}
.dd-conv2__cta:hover svg{transform:translateX(-4px);}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width:980px){
	.dd-cointro__cols{grid-template-columns:1fr;gap:26px;}
	.dd-cointro__panel{max-width:560px;width:100%;margin-inline:auto;}
}
@media (max-width:600px){
	.dd-cointro--duo{padding-top:14px;}
	.dd-cointro__perk{font-size:.76rem;padding:6px 10px;}
	.dd-cointro__perk svg{width:13px;height:13px;}
	.dd-cointro__signup{max-width:none;}
}

/* ---- reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.dd-cointro__livedot::after,
	.dd-conv2__stockdot::after,
	.dd-conv2__live i::after{animation:none !important;}
}