/* SELF-HOSTED FONTS */
/*
Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.


Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/font-cdae8ee9391d20c9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/font-f044301b7dd622a5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/font-3d50b992125d9778.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/font-808d8d26b49135ab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/font-2a84ba04cd814708.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/font-488e956feb1421c4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/font-c876947c0f896937.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/font-e3237528af752eed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/font-e3237528af752eed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/font-e3237528af752eed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/font-e3237528af752eed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/font-e3237528af752eed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/font-e3237528af752eed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #090a0b;
  --surface: #121315;
  --surface-raised: #191a1d;
  --surface-soft: #202125;
  --line: #343538;
  --text: #f8f7f3;
  --text-soft: #d0cec7;
  --muted: #a6a59f;
  --accent: #edc45b;
  --accent-strong: #ffdc81;
  --accent-ink: #211707;
  --accent-wash: #2b2415;
  --header: #101113;
  --page-overlay: rgb(9 10 11 / 32%);
  --button-gold: linear-gradient(110deg, #ffe395, #e9b446);
  --shadow: 0 20px 60px #00000030;
  --focus: #ffdc81;
  --radius: 18px;
  --page-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: linear-gradient(var(--page-overlay), var(--page-overlay)), url('assets/optimized/background-1280.webp') center / cover fixed, var(--bg);
  color: var(--text);
  font: 400 15px/1.7 Inter, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { transition: border-color .18s, background-color .18s, transform .18s; }
button:hover { border-color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--bg); }
h1, h2, h3, h4, p { margin: 0; }
button, input, article, aside, section { min-width: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: var(--accent); color: var(--bg); transform: translateY(-160%); font-weight: 700; }
.skip-link:focus { transform: none; }

/* Navigation and promotion */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 84px;
  padding: 8px max(calc((100vw - var(--page-width)) / 2), 32px);
  border-bottom: 1px solid var(--line);
  background: var(--header);
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 10px; }
/* Frame the original PNG's visible bounds; retain all source pixels. */
.brand-logo-frame { position: relative; display: block; flex-shrink: 0; width: 58px; aspect-ratio: 740 / 799; overflow: hidden; }
.brand-logo { position: absolute; display: block; width: 135.135135%; max-width: none; height: auto; left: -17.702703%; top: -10.763454%; image-rendering: auto; }
.brand-name { display: inline-flex; gap: .12em; white-space: nowrap; font: italic 800 24px/.94 'Barlow Condensed', Impact, sans-serif; letter-spacing: .6px; }
.brand-name > span { display: inline; color: var(--accent); }
nav { display: flex; align-items: center; gap: 32px; }
nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; color: var(--text-soft); font: italic 800 18px/1.2 'Barlow Condensed', 'Segoe UI', sans-serif; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; transition: color .18s ease; }
nav a::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 2px; border-radius: 2px; background: var(--accent); content: ''; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
nav a:hover::after, nav a:focus-visible::after, nav a[aria-current="page"]::after { transform: scaleX(1); }
nav a:hover, .footer-main a:hover { color: var(--accent); }
nav a[aria-current="page"] { color: var(--accent); }
.head-actions { display: flex; align-items: center; gap: 10px; }
.head-actions button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12px; font-weight: 700; }
.head-actions .login { padding: 0 14px; }
.head-actions .country { border-radius: 50%; }
.head-actions .menu { display: none; font-size: 20px; }
.promo { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 45px; padding: 10px 24px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); background: var(--accent-wash); font-size: 11px; letter-spacing: .45px; text-align: center; }
.promo strong { font-weight: 700; }
.shield { color: var(--accent); font-size: 17px; }
.promo-end { padding-left: 18px; border-left: 1px solid var(--line); color: var(--accent); font-size: 10px; font-weight: 700; }

/* Hero: the two services remain immediately available. */
.hero { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; max-width: var(--page-width); margin: auto; padding: 76px 32px 48px; }
.hero-copy { width: 100%; max-width: 919.6px; margin: 0 auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 6px; background: var(--accent-wash); color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }
.eyebrow i, .online i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1.hero-wordmark { margin: 22px 0 6px; }
/* Selectable HTML title; only the two decorative O marks use vector artwork. */
.hero-wordmark-frame { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 871.2px); aspect-ratio: 740 / 190; margin: 0 auto; container-type: inline-size; }
.hero-wordmark-text { display: inline-flex; align-items: center; justify-content: center; gap: .38em; font-family: Arial, Helvetica, sans-serif; font-size: clamp(24px, 13.3cqw, 116px); font-weight: 700; font-style: normal; font-synthesis: none; line-height: 1; letter-spacing: 0; white-space: nowrap; user-select: text; }
.wordmark-word { display: inline-flex; align-items: center; gap: .14em; flex-shrink: 0; }
.wordmark-letter { display: block; flex-shrink: 0; font: inherit; line-height: 1; color: #fff8b5; }
/* Match the visible cap height of rounded Arial glyphs to I, N, H and P. */
.wordmark-c, .wordmark-s-first, .wordmark-s-second { transform: scaleY(.967); transform-origin: center center; }
.wordmark-c { color: #ffda5e; }
.wordmark-i { color: #ffda63; }
.wordmark-n { color: #ffe176; }
.wordmark-s-first { color: #fff2a1; }
.wordmark-p { color: #e5a650; }
.wordmark-coin, .wordmark-ball { position: relative; display: block; flex-shrink: 0; width: .82em; height: .82em; margin: 0; color: transparent; -webkit-text-fill-color: transparent; line-height: 1; }
.wordmark-ball { width: .86em; }
.wordmark-placeholder { position: absolute; inset: 0; opacity: 0; line-height: .82; }
.wordmark-coin { background: url('wordmark-fut-coin.svg') center / contain no-repeat; }
.wordmark-ball::after { position: absolute; top: calc(50% - .734em); left: 0; width: 100%; aspect-ratio: 99 / 207; background: url('wordmark-football.svg') center / contain no-repeat; pointer-events: none; content: ''; }
@supports not (font-size: 1cqw) { .hero-wordmark-text { font-size: clamp(24px, 9vw, 113px); } }
.hero-copy > p { max-width: 660px; margin: 0 auto; color: var(--muted); font-family: Inter, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.85; text-transform: none; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 900px; margin: 0 auto; }
.service-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.service-card:first-child, .service-card-gold { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: linear-gradient(135deg, var(--accent-wash), var(--surface) 55%); }
.service-card > .yellow-btn, .service-card > .outline-btn { margin-top: auto; }
.service-card-gold .service-icon { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.service-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--accent); font-size: 20px; }
.coin-icon { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); font-size: 13px; font-weight: 800; }
.emoji-mark { display: inline-block; margin-inline-end: .2em; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 1.08em; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0; vertical-align: -.06em; }
.service-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 20px; font-style: normal; font-weight: 400; }
.service-rocket { background: var(--accent-wash); }
.service-coin-image { background: var(--accent-wash); }
.service-coin-image img { display: block; width: 28px; height: 28px; object-fit: contain; }
.service-rocket svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card h2 { margin-bottom: 4px; font: italic 800 26px/1.1 'Barlow Condensed', Impact, sans-serif; }
.service-card p { margin-bottom: 16px; color: var(--muted); font-size: 12px; line-height: 1.7; }
/* Shared service panel, selected from the local design proposals. */
.service-grid.service-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 16px; background: var(--surface); }
.service-panel .service-card { min-width: 0; min-height: 330px; padding: 28px 32px; align-items: center; text-align: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.service-panel .service-card:first-child { background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 83%); }
.service-panel .service-card + .service-card { border-left: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.service-panel .service-card::after { content: ''; position: absolute; right: -25px; top: 25px; width: 100px; height: 220px; border-left: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); transform: rotate(24deg); opacity: .55; pointer-events: none; }
.service-panel .service-icon { width: 64px; height: 64px; margin-bottom: 18px; border: 0; border-radius: 0; background: transparent; }
.service-panel .service-coin-image img { width: 64px; height: 64px; }
.service-panel .service-rocket svg { width: 44px; height: 44px; }
.service-panel .service-card h2 { position: relative; z-index: 1; margin-bottom: 10px; font-size: 36px; }
.service-panel .service-card p { position: relative; z-index: 1; max-width: 295px; margin-bottom: 26px; font-size: 13px; line-height: 1.7; }
.service-panel .service-card > .yellow-btn { position: relative; z-index: 1; }
.service-panel .service-card-gold h2 { color: var(--accent); }
.service-panel .service-card-gold > .yellow-btn { padding-left: 20px; padding-right: 20px; border: 1px solid var(--accent); border-radius: 9px; background: transparent; color: var(--accent); box-shadow: none; }
.service-panel .service-card-gold > .yellow-btn:hover { background: var(--accent-wash); }
@media (max-width: 600px) {
  .service-grid.service-panel { grid-template-columns: minmax(0, 1fr); }
  .service-panel .service-card { min-height: 0; padding: 26px; }
  .service-panel .service-card + .service-card { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
  .service-panel .service-icon { margin-bottom: 14px; }
  .service-panel .service-card h2 { font-size: 32px; }
  .service-panel .service-card p { max-width: none; margin-bottom: 20px; }
  .service-panel .service-card > .yellow-btn { width: auto; }
}
.yellow-btn, .outline-btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 800; letter-spacing: .6px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.yellow-btn { background: var(--button-gold); color: var(--accent-ink); }
.yellow-btn:hover, .buy-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px #c894242a; }
.outline-btn { border-color: var(--line); background: var(--surface-raised); color: var(--text); }
.outline-btn:hover { border-color: var(--accent); }
.hero > .trust-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; max-width: 900px; margin: 0 auto; padding: 17px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(110deg, var(--surface), var(--surface-soft)); color: var(--text-soft); font-size: 13px; font-weight: 500; }
.trust-item { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-icon { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; color: var(--accent); background: var(--accent-wash); }
.trust-icon svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .hero > .trust-row { padding: 15px 4px; font-size: 11px; }
  .trust-item { flex-direction: column; gap: 9px; text-align: center; }
  .trust-icon { flex-basis: 32px; width: 32px; height: 32px; }
}
.feature-row span:first-letter { color: var(--accent); }

/* Shared section rhythm */
.section { max-width: var(--page-width); margin: auto; padding: 72px 32px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.kicker { display: inline-block; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.section h2, .referral h2 { margin: 10px 0 14px; font: italic 800 clamp(32px, 3.8vw, 48px)/1.05 'Barlow Condensed', Impact, sans-serif; letter-spacing: -.3px; }
.section h2 span, .referral h2 span { color: var(--accent); }
.section-head p, .referral p { max-width: 640px; color: var(--muted); font-size: 14px; line-height: 1.8; }
/* Social profile and reviews carousel */
.community { padding-top: 44px; border-top: 1px solid var(--line); }
.social-profile { padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.social-profile-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.social-avatar { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px; border: 2px solid #c93d8a; border-radius: 50%; background: #101113; }
.social-avatar .brand-logo-frame { width: 40px; }
.community .social-profile-heading h2 { margin: 0 0 4px; color: var(--text); font: 800 19px/1.3 Inter, 'Segoe UI', sans-serif; letter-spacing: -.5px; }
.social-profile-heading p { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: 1.3px; line-height: 1.8; }
.social-status-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.social-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.social-stats > div { display: flex; min-height: 82px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.social-stats strong { color: var(--accent); font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.social-stats > div > span { color: var(--muted); font-size: 9px; letter-spacing: 1.7px; }
.instagram-follow { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 16px; padding: 10px 16px; border: 0; border-radius: 11px; background: linear-gradient(105deg, #d89b32, #edc45b 52%, #ffe395); box-shadow: 0 8px 22px #d6a33e35; color: var(--accent-ink); font-size: 13px; font-weight: 700; text-align: center; }
.instagram-follow:hover { filter: brightness(1.08); }
.instagram-follow svg { flex-shrink: 0; }
.reviews-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 10px; }
.reviews-toolbar > .reviews-caption { color: var(--muted); font-size: 10px; line-height: 1.6; }
.carousel-controls { display: flex; flex-shrink: 0; gap: 8px; }
.carousel-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-soft); font-size: 24px; line-height: 1; }
.carousel-controls button:disabled { opacity: .4; cursor: default; }
.carousel-controls button:disabled:hover { border-color: var(--line); }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3.12); gap: 16px; overflow-x: auto; padding: 0 0 8px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.reviews-track::-webkit-scrollbar { display: none; }
.review-card { display: flex; flex-direction: column; min-height: 224px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-raised); scroll-snap-align: start; }
.review-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-stars { color: var(--accent); font-size: 15px; font-weight: 700; letter-spacing: 1px; line-height: 1.4; }
.review-card-top > span:last-child { color: var(--muted); font-size: 9px; letter-spacing: .7px; }
.review-card blockquote { margin: 16px 0 20px; color: var(--text-soft); font-size: 13px; line-height: 1.85; }
.review-author { display: flex; align-items: center; gap: 10px; margin-top: auto; color: var(--text-soft); font-size: 11px; font-weight: 600; }
.review-avatar { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); font-size: 9px; font-weight: 700; }
.review-author > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.review-author:hover { color: var(--accent); }
.community-cta { display: flex; width: fit-content; min-height: 50px; margin: 20px auto 0; padding-right: 28px; padding-left: 28px; font-size: 13px; letter-spacing: 0; }
.center { display: block; margin-bottom: 36px; text-align: center; }
.center > p { max-width: 640px; margin: auto; }
.how-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.calculator { border-top: 1px solid var(--line); }

/* Purchase controls */
.calc-layout { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; align-items: start; gap: 24px; }
.steps { display: block; position: sticky; top: 108px; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.purchase-steps { visibility: visible; opacity: 1; }
.step-label, .field-label { display: block; color: var(--text-soft); font-size: 11px; font-weight: 700; letter-spacing: 1px; line-height: 1.6; }
.step { display: flex; align-items: center; gap: 13px; padding: 23px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.step > span { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; font-weight: 700; }
.step.active { color: var(--text); }
.step.active > span { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.step b { display: block; font-size: 11px; letter-spacing: .8px; }
.step small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.secure-note { margin-top: 24px; font-size: 12px; color: var(--text-soft); }
.secure-note small { display: block; margin: 5px 0 0 22px; font-size: 11px; color: var(--muted); }
.calc-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 28px; }
.platform { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 8px; border: 1px solid color-mix(in srgb, var(--line) 55%, var(--surface)); border-radius: 9px; background: var(--bg); color: var(--muted); font-family: Inter, 'Segoe UI', sans-serif; font-size: 12px; font-style: italic; font-weight: 900; line-height: 1.2; letter-spacing: .35px; text-transform: uppercase; }
.platform-symbol { display: inline-block; flex-shrink: 0; width: 14px; height: 14px; margin: 0; color: currentColor; }
.platform-brand-logo { fill: currentColor; }
.platform-pc { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.platform.selected { border-color: #e9b446; background: var(--button-gold); color: var(--accent-ink); box-shadow: none; }
.platform.selected .platform-symbol { color: inherit; }
.method-heading { margin-bottom: 12px; }
.delivery-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.delivery-method { display: flex; min-height: 150px; flex-direction: column; align-items: start; gap: 8px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-raised); text-align: left; }
.delivery-method.selected { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.delivery-method b { font-size: 14px; font-weight: 700; }
.delivery-method small { color: var(--text-soft); font-size: 12px; line-height: 1.65; }
.delivery-method-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; width: 100%; }
.delivery-method-top b { display: inline-flex; align-items: center; gap: 4px; }
.delivery-badge { padding: 2px 6px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .6px; line-height: 1.4; white-space: nowrap; }
.delivery-benefits { display: grid; gap: 3px; margin-top: auto; padding-top: 2px; color: var(--text-soft); font-size: 11px; font-weight: 400; line-height: 1.6; }
.delivery-benefits > span { display: flex; align-items: baseline; gap: 6px; }
.delivery-check { color: #19ce78; flex-shrink: 0; font-size: 12px; }
.delivery-benefit-muted { color: var(--muted); }
.custom-label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.custom-label span { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.quantity { display: flex; align-items: center; height: 64px; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.quantity:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.quantity button { flex-shrink: 0; width: 52px; height: 100%; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); font-size: 22px; }
.quantity button:hover { background: var(--surface-soft); color: var(--accent); }
.quantity input { min-width: 0; min-height: 44px; flex: 1; width: 100%; border: 0; background: transparent; color: var(--text); font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.quantity input:focus-visible { outline: none; }
.quantity > span { margin-right: 8px; color: var(--muted); font-size: 10px; letter-spacing: .5px; }
.presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.presets button { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); color: var(--text-soft); font-size: 12px; font-weight: 600; }
.presets button:hover, .presets button.active { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.goal-label { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 24px 0 12px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .6px; }
.goal-label span { color: var(--accent); }
.goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.goals button { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 76px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); text-align: left; }
.goals button b { font-size: 11px; font-weight: 600; line-height: 1.5; }
.goals button small { color: var(--muted); font-size: 11px; }
.goals button.selected, .goals button:hover { border-color: var(--accent); background: var(--accent-wash); }
.summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.summary span { font-size: 14px; font-weight: 600; }
.summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.summary strong { font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; white-space: nowrap; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.cashback { margin-top: 10px; color: var(--accent); font-size: 11px; line-height: 1.8; }
.cashback span { color: var(--muted); }
.buy-btn { display: block; width: 100%; min-height: 56px; margin: 22px 0 18px; padding: 12px; border: 0; border-radius: 10px; background: var(--button-gold); color: var(--accent-ink); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.buy-btn span { margin-left: 12px; }
.payment { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px 14px; color: var(--text-soft); font-size: 9px; font-weight: 700; letter-spacing: .3px; }
.requirements { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; }
.requirements b { color: var(--text-soft); font-weight: 600; }
/* Small readability adjustments; retain the existing purchase layout. */
.calc-card .field-label { font-size: 12px; letter-spacing: .65px; }
.calc-card .platform { font-size: 13px; }
.calc-card .delivery-method small { font-size: 13px; }
.calc-card .delivery-benefits { font-size: 12px; line-height: 1.7; }
.calc-card .delivery-badge { color: var(--text-soft); font-size: 10px; letter-spacing: .3px; }
.calc-card .custom-label span { color: var(--text-soft); font-size: 12px; }
.calc-card .goal-label { color: var(--text-soft); font-size: 11px; }
.calc-card .goals button b, .calc-card .goals button small { font-size: 12px; }
.calc-card .summary small { color: var(--text-soft); font-size: 12px; }
.calc-card .cashback { font-size: 12px; }
.calc-card .cashback span, .calc-card .requirements { color: var(--text-soft); }
.calc-card .payment { font-size: 11px; }

/* Process, information and support */
.journey, .seo, .faq { border-top: 1px solid var(--line); }
.journey-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.journey-track article { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.journey-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 10px; background: var(--accent-wash); color: var(--accent); font-size: 12px; font-weight: 700; }
.journey-track h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 600; }
.journey-track p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.journey-note { margin-top: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-wash); color: var(--text-soft); font-size: 12px; }
.journey-note span { margin-right: 8px; color: var(--accent); }
.journey-flow .section-head { justify-content: center; margin-bottom: 32px; text-align: center; }
.journey-flow .section-head p { margin-inline: auto; }
.journey-flow .journey-track { gap: 24px; padding: 32px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 18px; background: linear-gradient(145deg, var(--surface-soft), var(--surface)); }
.journey-flow .journey-track article { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; text-align: center; }
.journey-flow .journey-track article:not(:last-child)::before { content: ''; position: absolute; top: 28px; left: 50%; width: calc(100% + 24px); height: 1px; background: linear-gradient(90deg, var(--accent), var(--line)); pointer-events: none; }
.journey-flow .journey-icon { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--accent); font-size: 16px; box-shadow: 0 0 0 7px var(--surface); }
.journey-flow .journey-line { display: none; }
.journey-flow .journey-track h3 { margin: 24px 0 10px; font-size: 18px; line-height: 1.4; }
.journey-flow .journey-track p { max-width: 290px; font-size: 13px; line-height: 1.8; }
.journey-flow .journey-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 18px 24px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); line-height: 1.7; }
.journey-flow .journey-note span { margin-right: 0; }
@media (max-width: 760px) {
  .journey-flow .journey-track { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 22px; }
  .journey-flow .journey-track article { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; column-gap: 20px; padding: 0; text-align: left; }
  .journey-flow .journey-icon { width: 48px; height: 48px; grid-row: 1 / 3; }
  .journey-flow .journey-track article:not(:last-child)::before { top: 24px; left: 24px; width: 1px; height: calc(100% + 28px); background: linear-gradient(var(--accent), var(--line)); }
  .journey-flow .journey-track h3 { margin: 3px 0 8px; font-size: 17px; }
  .journey-flow .journey-track p { grid-column: 2; max-width: none; }
  .journey-flow .journey-note { align-items: flex-start; padding: 16px; }
}
.seo { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 40px; }
.seo-coin { display: grid; place-items: center; width: 110px; height: 110px; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent-wash); color: var(--accent); font-size: 42px; box-shadow: inset 0 0 0 8px var(--bg); }
.seo p { max-width: 780px; color: var(--text-soft); font-size: 14px; line-height: 1.9; }
.feature-row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; color: var(--text-soft); font-size: 12px; }
.referral { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: calc(var(--page-width) - 64px); margin: 0 auto 64px; padding: 32px 40px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: var(--radius); background: linear-gradient(120deg, var(--accent-wash), var(--surface)); }
.referral .outline-btn { flex-shrink: 0; }
.faq h2 { margin-bottom: 30px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 18px 22px; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.6; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex-shrink: 0; color: var(--accent); font-size: 18px; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { padding: 0 22px 22px; color: var(--muted); font-size: 13px; line-height: 1.9; }

footer { padding: 48px max(calc((100vw - 1136px) / 2), 32px) 24px; border-top: 1px solid var(--line); background: var(--header); }
.footer-main { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 38px; padding-bottom: 38px; }
.footer-brand .brand-logo-frame { width: 68px; }
.footer-brand p { max-width: 300px; margin: 18px 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.social { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--text-soft); font-size: 12px; }
.social a { display: inline-flex; align-items: center; min-height: 44px; }
.paymarks { margin-top: 14px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.footer-main h2 { margin: 12px 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.footer-main > div:not(:first-child) > a { display: flex; align-items: center; min-height: 38px; color: var(--muted); font-size: 12px; }
.online { display: flex; align-items: center; min-height: 38px; margin-top: 0; color: var(--muted); font-size: 12px; }
.online i { display: none; }
.disclaimer { padding: 20px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.8; text-align: center; }
.copyright { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.chat { position: fixed; right: 24px; bottom: 24px; z-index: 25; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #1ebd5b; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 24px #00000024; font-size: 22px; animation: whatsapp-glow 3s ease-in-out infinite; }
.chat img { width: 32px; height: 32px; display: block; }
.chat:hover { background: #20c75d; }
@keyframes whatsapp-glow { 0%,100% { box-shadow: 0 8px 24px #00000024,0 0 0 0 #25d36630; } 50% { box-shadow: 0 8px 24px #00000024,0 0 0 6px #25d36612; } }
@media(prefers-reduced-motion:reduce) { .chat { animation: none; } }
.toast { position: fixed; right: 24px; bottom: 90px; z-index: 30; max-width: min(390px, calc(100vw - 32px)); padding: 16px 20px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: none; }

@media (min-width: 1440px) {
  .hero { padding-top: 90px; padding-bottom: 64px; }
}
@media (max-width: 1024px) {
  nav { gap: 22px; }
  .hero { gap: 30px; padding-top: 56px; }
  .reviews-track { grid-auto-columns: calc((100% - 20px) / 2.15); }
  .service-card { padding: 22px; }
  .calc-layout { grid-template-columns: 1fr; }
  .steps { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 26px; }
  .step-label { grid-column: 1 / -1; }
  .step { padding: 8px 0; border: 0; }
  .secure-note { display: block; grid-column: 1 / -1; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
  .footer-main { grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; }
  .footer-main > div:last-child { grid-column: 2 / -1; }
  .footer-brand { grid-row: span 2; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  #main-navigation { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 20px; border-bottom: 1px solid var(--line); background: var(--header); box-shadow: var(--shadow); }
  #main-navigation.open { display: flex; }
  #main-navigation a { min-height: 48px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .head-actions .menu { display: inline-block; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 90px; }
  .topbar { min-height: 72px; padding: 6px 20px; gap: 12px; }
  .brand-logo-frame { width: 50px; }
  .brand-name { font-size: 22px; }
  nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 20px; border-bottom: 1px solid var(--line); background: var(--header); box-shadow: var(--shadow); }
  nav.open { display: flex; }
  nav a { min-height: 48px; padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 18px; }
  .head-actions { gap: 8px; }
  .head-actions .menu { display: inline-block; }
  .head-actions .login { padding: 0 10px; }
  .head-actions .login span { display: inline; font-size: 10px; white-space: nowrap; }
  .promo { min-height: 44px; padding: 10px 16px; gap: 10px; font-size: 10px; letter-spacing: .15px; }
  .promo-end { display: none; }
  .hero { grid-template-columns: 1fr; padding: 46px 24px 36px; gap: 28px; }
  .hero-copy { max-width: 560px; }
  .hero h1 { margin: 24px 0; }
  .hero-copy > p { font-size: 14px; letter-spacing: 0; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .service-card { display: flex; flex-direction: column; align-items: start; padding: 20px; }
  .service-card .yellow-btn, .service-card .outline-btn { margin-top: auto; width: 100%; padding: 0 12px; gap: 12px; font-size: 10px; }
  .service-card p { font-size: 12px; }
  .trust-row { gap: 8px 16px; padding: 20px 0 0; margin: 0; font-size: 10px; }
  .section { padding: 48px 24px; }
  .reviews-track { grid-auto-columns: calc((100% - 16px) / 1.3); }
  .section-head { margin-bottom: 24px; align-items: start; }
  .section h2, .referral h2 { font-size: 36px; }
  .section-head p, .referral p { font-size: 13px; }
  .steps { gap: 10px; padding: 20px; }
  .step { gap: 8px; }
  .step small { display: block; font-size: 10px; line-height: 1.6; }
  .step b { font-size: 10px; }
  .calc-layout { gap: 16px; }
  .calc-card { padding: 24px; }
  .delivery-method { padding: 14px; }
  .journey-track { grid-template-columns: 1fr; gap: 12px; }
  .journey-track article { display: grid; grid-template-columns: 38px 1fr; gap: 4px 18px; padding: 22px; }
  .journey-icon { grid-row: span 2; }
  .journey-line { display: none; }
  .journey-track h3 { margin: 0 0 4px; }
  .journey-track p { grid-column: 2; }
  .seo { grid-template-columns: 1fr; gap: 24px; }
  .seo-coin { width: 70px; height: 70px; font-size: 30px; }
  .referral { flex-direction: column; align-items: start; gap: 24px; margin: 0 24px 48px; padding: 26px; }
  .faq-grid { grid-template-columns: 1fr; }
  footer { padding: 36px 24px 24px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-main > div:last-child { grid-column: auto; }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; }
  .footer-brand p { max-width: 440px; }
  .copyright { flex-direction: column; gap: 8px; padding-right: 54px; }
  .chat { right: 16px; bottom: 16px; }
  .toast { right: 16px; bottom: 82px; }
}
@media (max-width: 480px) {
  .topbar { padding-right: 16px; padding-left: 16px; }
  .social-profile { padding: 16px; border-radius: 18px; }
  .social-profile-heading { gap: 10px; }
  .social-avatar { width: 48px; height: 48px; }
  .social-avatar .brand-logo-frame { width: 33px; }
  .social-profile-heading p { font-size: 8px; letter-spacing: .5px; }
  .social-stats { gap: 7px; }
  .social-stats > div { min-height: 76px; padding: 10px 6px; }
  .social-stats strong { font-size: clamp(16px, 4.7vw, 23px); }
  .social-stats > div > span { font-size: 8px; letter-spacing: 1px; }
  .instagram-follow { font-size: 12px; }
  .reviews-track { grid-auto-columns: 90%; }
  .review-card { min-height: 210px; }
  .reviews-toolbar > .reviews-caption { max-width: 170px; }
  .brand { gap: 5px; }
  .brand-logo-frame { width: 40px; }
  .brand-name { font-size: 20px; }
  .head-actions { gap: 6px; }
  .head-actions .country { min-width: 38px; min-height: 44px; border-radius: 10px; }
  .hero, .section { padding-right: 20px; padding-left: 20px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { padding: 24px; }
  .service-card .yellow-btn, .service-card .outline-btn { width: auto; font-size: 11px; padding: 0 20px; }
  .trust-row { justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
  .calc-card { padding: 20px 16px; }
  .platforms { gap: 6px; }
  .calc-card .platform { flex-direction: column; gap: 5px; min-height: 68px; padding: 10px 4px; font-size: clamp(10px, 3vw, 12px); letter-spacing: 0; }
  .platform-symbol { margin-right: 0; }
  .delivery-methods { grid-template-columns: 1fr; }
  .delivery-method { min-height: 132px; }
  .quantity button { width: 44px; }
  .quantity input { font-size: 21px; }
  .quantity > span { display: none; }
  .presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .goals { grid-template-columns: 1fr; }
  .goals button { flex-direction: row; align-items: center; justify-content: space-between; min-height: 52px; gap: 10px; }
  .goals button b, .goals button small { font-size: 12px; }
  .steps { grid-template-columns: 1fr; gap: 6px; padding: 18px 16px; }
  .step { gap: 12px; padding: 10px 0; }
  .step > span { width: 28px; height: 28px; font-size: 10px; }
  .step b { font-size: 11px; letter-spacing: .5px; }
  .referral { margin-right: 20px; margin-left: 20px; padding: 24px; }
  .journey-note { padding: 16px; }
  .faq summary { padding: 18px; }
  footer { padding-right: 20px; padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Acceso real al soporte, con la misma forma del botón flotante. */
a.chat{display:grid;place-items:center;text-decoration:none}a.chat:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.promo[hidden]{display:none!important}

/* Mantener el acceso a la cuenta explícito en teléfonos estrechos. */
@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; }
  .topbar .head-actions { width: 100%; justify-content: flex-end; }
  html { scroll-padding-top: 140px; }
}

/* Account action uses the store gold, with a clear hover state. */
.head-actions .login { color: var(--accent); transition: color .2s, background .2s, border-color .2s; }
.head-actions .login:hover, .head-actions .login:focus-visible { color: #17130a; background: var(--accent); border-color: var(--accent); }
nav .sell-nav-link { color: var(--text-soft); }
nav .sell-nav-link:hover, nav .sell-nav-link:focus-visible { color: var(--accent); }

.head-actions .login span { text-transform: uppercase; }

.referral-invitation-banner { padding: 20px 24px; margin: 20px auto; max-width: 1100px; border: 1px solid #806831; border-radius: 16px; background: #252013; color: #f1d17e; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.referral-invitation-banner[hidden], .checkout-field[hidden] { display: none !important; }
.referral-invitation-banner p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.7; }
.referral-invitation-banner a[hidden] { display: none; }

.referral-invitation-banner button[hidden] { display: none; }

/* Selected community design: compact header, keeping the story ring. */
.community-showcase .social-profile { display: grid; grid-template-columns: minmax(220px,1.2fr) minmax(280px,1fr); column-gap: 28px; row-gap: 22px; padding: 24px 28px; border-radius: 18px; border-color: #6b582e; background: linear-gradient(110deg,#232016,#101214 60%); }
.community-showcase .social-avatar { width: 64px; height: 64px; }
.community-showcase .social-avatar .brand-logo-frame { width: 44px; }
.community-showcase .social-profile-heading { margin: 0; }
.community-showcase .social-profile-heading h2 { font-size: 22px; }
.community-showcase .social-profile-heading p { font-size: 9px; }
.community-showcase .instagram-follow { grid-column: 1/-1; justify-self: start; width: fit-content; min-height: 46px; margin: 0; padding: 10px 20px; border: 1px solid #ffffff30; border-radius: 24px; background: linear-gradient(110deg,#7024b9,#b72178 38%,#bc2a42 70%,#ae4318); color: #fff; font-size: 12px; box-shadow: 0 5px 20px #b7217824; }
.community-showcase .instagram-follow:hover { filter: brightness(1.05); }
.community-reviews { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.community-showcase .reviews-toolbar { margin: 24px 0 16px; }
.community-showcase .reviews-toolbar > .reviews-caption { max-width: none; font-size: 12px; }
.community-showcase .reviews-track { grid-auto-columns: calc((100% - 32px)/3); }
.community-showcase .review-card { min-height: 218px; border: 0; border-left: 2px solid #927439; border-radius: 0 14px 14px 0; background: #151719; }
.community-showcase .review-card blockquote { font-size: 15px; line-height: 1.8; }
.community-showcase .review-author { font-size: 12px; }
.community-showcase .community-cta { align-self: center; background: var(--button-gold); color: var(--accent-ink); padding: 0 20px; min-height: 44px; margin: 22px auto 0; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.community-showcase .social-stats { gap: 0; align-self: center; }
.community-showcase .social-stats > div { min-height: 64px; border: 0; border-left: 1px solid #ffffff20; background: transparent; border-radius: 0; padding: 8px 12px; }
.community-showcase .social-stats strong { font-size: 28px; }
@media(max-width:760px) {
 .community-showcase .social-profile { grid-template-columns: minmax(0,1fr); padding: 22px 18px; }
 .community-showcase .social-profile-heading { flex-wrap: wrap; }
 .community-showcase .social-stats > div:first-child { border-left: 0; }
 .community-showcase .social-stats strong { font-size: clamp(22px,6.5vw,28px); }
 .community-showcase .instagram-follow { justify-self: stretch; width: auto; }
 .community-showcase .reviews-track { grid-auto-columns: 88%; }
}

/* EA tax label replaces the duplicate quantity in the selector summary. */
.summary .tax-included { color: #40e69a; font-size: 13px; font-weight: 600; }

.faq-heading { text-align: center; }

.delivery-method-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; margin-right: 4px; color: var(--accent); }