.cc {
–bg: #1a0833;
–bg-deep: #12051f;
–bg-card: #26104a;
–line: #3f1f6d;
–pink: #ff3d9e;
–pink-soft: #ffb3d9;
–gold: #ffc27a;
–text: #fff4fa;
–dim: #c9b0e6;
–f-display: “Gloock”, Georgia, serif;
–f-body: “Plus Jakarta Sans”, system-ui, sans-serif;
color-scheme: dark;
}
.cc * { box-sizing: border-box; }
.cc { background: var(–bg); color: var(–text); font-family: var(–f-body); font-size: 17px; line-height: 1.65; padding-inline: 0; padding-block: 0; overflow-x: hidden; }
.cc .gut { padding-inline: 20px; }
.cc .wrap { max-width: 1180px; margin-inline: auto; }
.cc a { color: inherit; }
.cc :focus-visible { outline: 3px solid var(–pink-soft); outline-offset: 3px; }
.cc .kicker { font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(–pink); }
.cc .btn { display: inline-block; font: 700 16px var(–f-body); text-decoration: none; padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; background: linear-gradient(95deg, var(–pink), #d4207f); box-shadow: 0 14px 34px -10px rgba(255,61,158,.75); transition: transform .2s, box-shadow .2s; }
.cc .btn:hover { transform: translateY(-3px); box-shadow: 0 0 0 7px rgba(255,61,158,.2), 0 18px 40px -8px rgba(255,61,158,.85); }
.cc .btn.line { background: rgba(26,8,51,.4); box-shadow: inset 0 0 0 2px var(–pink-soft); color: var(–pink-soft); backdrop-filter: blur(4px); }
.cc .btn.line:hover { background: rgba(255,179,217,.18); box-shadow: inset 0 0 0 2px var(–pink-soft); }
.cc .slider { position: relative; height: clamp(560px, 86vh, 760px); overflow: hidden; isolation: isolate; background: var(–bg-deep); }
.cc .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; z-index: 0; }
.cc .slide.on { opacity: 1; }
.cc .slide img { width: 100%; height: 100%; display: block; object-fit: cover; filter: blur(3px) saturate(1.1); transform: scale(1.05); }
.cc .slide.on img { animation: cc-kb 14s ease-out forwards; }
@keyframes cc-kb { from { transform: scale(1.05); } to { transform: scale(1.14) translateX(-1%); } }
.cc .veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(26,8,51,.5), rgba(26,8,51,0) 100%), linear-gradient(180deg, rgba(36,10,70,.62), rgba(36,10,70,.42) 45%, rgba(18,5,31,.9)); }
.cc .copy { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 20px; }
.cc .copy > div { max-width: 920px; }
.cc .copy h1 { font-family: var(–f-display); font-weight: 400; font-size: clamp(40px, 8.4vw, 98px); line-height: 1.02; margin: 16px 0 18px; text-wrap: balance; text-shadow: 0 4px 30px rgba(10,0,20,.8), 0 0 2px rgba(10,0,20,.6); }
.cc .copy h1 i { font-style: normal; color: var(–pink-soft); }
.cc .copy p { color: #f1e4ff; max-width: 54ch; margin: 0 auto 30px; font-size: 19px; text-shadow: 0 2px 16px rgba(10,0,20,.9); }
.cc .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cc .ctrl { position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.cc .dots { display: flex; gap: 8px; }
.cc .dots button { width: 34px; height: 5px; border-radius: 4px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; }
.cc .dots button[aria-current=”true”] { background: var(–pink); box-shadow: 0 0 12px var(–pink); }
.cc .arrow { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(18,5,31,.45); color: #fff; font-size: 18px; cursor: pointer; }
.cc .arrow:hover { border-color: var(–pink-soft); color: var(–pink-soft); }
.cc section.block { padding-block: 100px 0; }
.cc .intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 36px; }
.cc .block h2 { font-family: var(–f-display); font-weight: 400; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.04; margin: 12px 0 0; text-wrap: balance; }
.cc .intro p { color: var(–dim); margin: 0; }
.cc .intro p + p { margin-top: 12px; }
.cc .cf-wrap { position: relative; margin-inline: -20px; overflow: hidden; padding-block: 36px 10px; background: radial-gradient(ellipse 50% 60% at 50% 45%, rgba(255,61,158,.16), transparent 70%); }
.cc .cf { position: relative; height: 590px; perspective: 1300px; }
.cc .cf-card { position: absolute; left: 50%; top: 14px; height: 552px; border-radius: 26px; background: linear-gradient(180deg, #2c1254, #1d0a3a); border: 2px solid rgba(255,179,217,.14); overflow: hidden; display: flex; flex-direction: column; transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .6s ease, box-shadow .6s ease, border-color .6s ease; will-change: transform; cursor: pointer; backface-visibility: hidden; -webkit-tap-highlight-color: transparent; }
.cc .cf-card::after { content: “”; position: absolute; inset: 0; background: #12051f; opacity: var(–dim-o, 0); pointer-events: none; transition: opacity .6s ease; border-radius: inherit; }
.cc .cf-card.active { cursor: default; border-color: transparent; background: linear-gradient(180deg, #321562, #200b40) padding-box, linear-gradient(160deg, var(–gold), var(–pink) 55%, #b4208a) border-box; box-shadow: 0 0 0 1px rgba(255,194,122,.25), 0 0 70px rgba(255,61,158,.55), 0 30px 60px -20px rgba(0,0,0,.7); }
.cc .cf-art { aspect-ratio: 5 / 4; overflow: hidden; flex: none; position: relative; }
.cc .cf-art img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1.2s ease; }
.cc .cf-card.active .cf-art img { transform: scale(1.06); }
.cc .cf-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cc .cf-body h3 { margin: 0 0 8px; font-family: var(–f-display); font-weight: 400; font-size: 27px; line-height: 1.1; }
.cc .cf-body p { margin: 0; color: #d9c6f0; font-size: 16px; line-height: 1.55; }
.cc .learn { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.25; color: #fff; padding: 13px 22px; border-radius: 999px; background: linear-gradient(95deg, #d4207f, var(–pink) 50%, var(–gold)); box-shadow: 0 10px 24px -8px rgba(255,61,158,.7); transition: transform .2s, box-shadow .2s; }
.cc .learn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -6px rgba(255,61,158,.9); }
.cc .cf-ctrl { display: flex; justify-content: center; align-items: center; gap: 16px; padding-top: 18px; }
.cc .cf-ctrl .arrow { width: 54px; height: 54px; font-size: 22px; border-color: rgba(255,179,217,.45); background: rgba(38,16,74,.8); }
.cc .cf-dots { display: flex; gap: 9px; align-items: center; }
.cc .cf-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: #6b3a9c; cursor: pointer; transition: width .3s, background .3s; }
.cc .cf-dots button[aria-current=”true”] { width: 34px; background: linear-gradient(90deg, var(–pink), var(–gold)); box-shadow: 0 0 12px rgba(255,61,158,.7); }
.cc .why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cc .why .w { background: linear-gradient(180deg, #2a1150, #1e0b3b); border: 1px solid var(–line); border-radius: 22px; padding: 26px 24px 28px; min-width: 0; transition: transform .3s, border-color .3s, box-shadow .3s; }
.cc .why .w:hover { transform: translateY(-6px); border-color: var(–pink); box-shadow: 0 22px 44px -20px rgba(255,61,158,.6); }
.cc .why .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(–pink), #b4208a); margin-bottom: 16px; box-shadow: 0 10px 22px -8px rgba(255,61,158,.7); }
.cc .why .ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc .why h3 { font-family: var(–f-display); font-weight: 400; font-size: 24px; margin: 0 0 6px; }
.cc .why p { margin: 0; color: var(–dim); font-size: 16px; }
.cc .rev { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cc .rev .r { background: var(–bg-card); border: 1px solid var(–line); border-radius: 22px; padding: 26px; min-width: 0; }
.cc .rev .stars { color: var(–gold); letter-spacing: 4px; font-size: 18px; margin-bottom: 10px; }
.cc .rev p { margin: 0 0 16px; font-size: 18px; line-height: 1.55; }
.cc .rev .who { color: var(–pink-soft); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.cc .rev .sample { display: block; margin-top: 4px; color: var(–dim); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.cc .faq { max-width: 820px; display: grid; gap: 12px; }
.cc .faq details { background: var(–bg-card); border: 1px solid var(–line); border-radius: 16px; padding: 0 22px; transition: border-color .3s; }
.cc .faq details[open] { border-color: rgba(255,61,158,.6); }
.cc .faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.cc .faq summary::-webkit-details-marker { display: none; }
.cc .faq summary::after { content: “+”; font-size: 26px; color: var(–pink); transition: transform .3s; line-height: 1; }
.cc .faq details[open] summary::after { transform: rotate(45deg); }
.cc .faq details p { margin: 0 0 20px; color: var(–dim); }
.cc .tl { position: relative; display: grid; gap: 22px; padding-left: 54px; max-width: 780px; }
.cc .tl::before { content: “”; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(–line); }
.cc .tl .fill { position: absolute; left: 17px; top: 8px; width: 4px; border-radius: 4px; height: 0; background: linear-gradient(180deg, var(–pink-soft), var(–pink)); box-shadow: 0 0 16px var(–pink); }
.cc .st { position: relative; background: var(–bg-card); border: 1px solid var(–line); border-radius: 18px; padding: 22px 24px; transition: border-color .3s; }
.cc .st::before { content: “”; position: absolute; left: -45px; top: 26px; width: 22px; height: 22px; border-radius: 50%; background: var(–bg); border: 4px solid var(–line); transition: all .3s; }
.cc .st.on { border-color: rgba(255,61,158,.55); }
.cc .st.on::before { border-color: var(–pink); background: var(–pink-soft); box-shadow: 0 0 16px var(–pink); }
.cc .st small { color: var(–pink); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }
.cc .st h3 { margin: 2px 0 4px; font-family: var(–f-display); font-weight: 400; font-size: 28px; }
.cc .st p { margin: 0; color: var(–dim); }
@media (max-width: 980px) {
.cc .intro { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
.cc .tl { padding-left: 46px; }
.cc .st::before { left: -39px; }
.cc .cf { height: 540px; }
.cc .cf-card { height: 504px; }
}
@media (prefers-reduced-motion: reduce) {
.cc .slide.on img { animation: none; }
}
.cc { display: block; width: 100%; }
.cc img { max-width: none; }
/* —- Theme override protection (keeps heading colours/fonts and buttons exactly as designed) —- */
.cc h1, .cc h2, .cc h3 { color: var(–text) !important; font-family: var(–f-display) !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; }
.cc .copy h1 i { color: var(–pink-soft) !important; font-family: var(–f-display) !important; font-style: normal !important; }
.cc .copy h1 { color: #fff !important; }
.cc .kicker { color: var(–pink) !important; font-family: var(–f-body) !important; }
.cc p { font-family: var(–f-body) !important; }
.cc .btn { color: #fff !important; font-family: var(–f-body) !important; }
.cc .btn.line { color: var(–pink-soft) !important; }
.cc .learn { color: #fff !important; font-family: var(–f-body) !important; }
.cc .arrow { color: #fff !important; }
.cc summary, .cc small { font-family: var(–f-body) !important; }
.cc .faq summary { color: var(–text) !important; }
/* —- Slider: grows with its content so the heading is never cut and arrows never cover the buttons —- */
.cc .slider { height: auto !important; min-height: clamp(560px, 86vh, 760px); display: grid; }
.cc .copy { position: relative !important; inset: auto !important; padding: 80px 20px 110px !important; }

html, body { overflow-x: clip !important; }
.ccf {
–bg: #12051f;
–bg-2: #1a0833;
–card: #26104a;
–line: #3f1f6d;
–pink: #ff3d9e;
–pink-soft: #ffb3d9;
–gold: #ffc27a;
–text: #fff4fa;
–dim: #c9b0e6;
–f-display: “Gloock”, Georgia, serif;
–f-body: “Plus Jakarta Sans”, system-ui, sans-serif;
position: relative; display: block; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% – 50vw) !important; margin-right: 0 !important; overflow: hidden; isolation: isolate;
background: radial-gradient(ellipse 55% 60% at 8% 100%, rgba(255,61,158,.22), transparent 70%), radial-gradient(ellipse 45% 50% at 95% 10%, rgba(154,92,255,.2), transparent 70%), var(–bg);
color: var(–text); font-family: var(–f-body); font-size: 16px; line-height: 1.65; box-sizing: border-box;
}
.ccf *, .ccf *::before, .ccf *::after { box-sizing: border-box; }
.ccf a { text-decoration: none; }
.ccf :focus-visible { outline: 3px solid var(–pink-soft); outline-offset: 3px; }
.ccf .wrap { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
/* top call-to-action band */
.ccf .cta { position: relative; margin-top: 0; padding-block: 64px 0; }
.ccf .band { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: linear-gradient(115deg, #3a0f8f 0%, #8a1c86 55%, var(–pink) 100%); box-shadow: 0 30px 70px -30px rgba(255,61,158,.65); position: relative; overflow: hidden; }
.ccf .band::before { content: “”; position: absolute; width: 380px; height: 380px; right: -90px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); }
.ccf .band::after { content: “”; position: absolute; left: 38%; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(255,255,255,.16); box-shadow: 0 0 0 28px rgba(255,255,255,.05); }
.ccf .band > * { position: relative; z-index: 1; }
.ccf .band h2 { font-family: var(–f-display) !important; font-weight: 400 !important; font-size: clamp(28px, 4.2vw, 46px) !important; line-height: 1.08 !important; margin: 0 0 8px !important; color: #fff !important; text-transform: none !important; letter-spacing: normal !important; }
.ccf .band p { margin: 0; color: #fbe6f4; max-width: 46ch; font-size: 17px; }
.ccf .band .go { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #5b1fd1 !important; font-weight: 700; font-size: 17px; padding: 16px 30px; border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.ccf .band .go:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -12px rgba(0,0,0,.6); }
.ccf .band .go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ccf .band .go:hover svg { transform: translateX(4px); }
/* columns */
.ccf .cols { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.6fr; gap: 40px; padding-block: 72px 56px; }
.ccf .col { min-width: 0; }
.ccf .logo { font-family: var(–f-display) !important; font-size: 28px; color: #fff !important; display: inline-block; margin-bottom: 14px; }
.ccf .logo em { color: var(–pink); font-style: normal; }
.ccf .about { color: var(–dim); max-width: 36ch; margin: 0 0 22px; }
.ccf h3 { font-family: var(–f-body) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(–pink) !important; margin: 0 0 20px !important; line-height: 1.3 !important; }
.ccf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ccf li { margin: 0; padding: 0; }
.ccf .links a { color: var(–dim) !important; display: inline-flex; align-items: center; gap: 0; position: relative; transition: color .2s, padding-left .25s; }
.ccf .links a::before { content: “”; width: 0; height: 2px; background: var(–pink); margin-right: 0; border-radius: 2px; transition: width .25s, margin-right .25s; }
.ccf .links a:hover { color: #fff !important; }
.ccf .links a:hover::before { width: 14px; margin-right: 8px; }
.ccf .contact li { display: flex; gap: 14px; align-items: flex-start; color: var(–dim); }
.ccf .contact .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,61,158,.3), rgba(154,92,255,.25)); border: 1px solid var(–line); }
.ccf .contact .ic svg { width: 18px; height: 18px; fill: none; stroke: var(–pink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ccf .contact small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9d83c4; font-weight: 600; }
.ccf .contact a, .ccf .contact span.v { color: var(–text) !important; font-weight: 500; overflow-wrap: anywhere; }
.ccf .contact a[href^=”mailto”] { font-size: 15px; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 420px) { .ccf .contact a[href^=”mailto”] { font-size: 14px; white-space: normal; overflow-wrap: anywhere; } }
.ccf .contact a:hover { color: var(–pink-soft) !important; }
/* social */
.ccf .social { display: flex; gap: 10px; flex-wrap: wrap; }
.ccf .social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(–line); background: rgba(38,16,74,.7); color: var(–pink-soft) !important; transition: transform .25s, background .25s, border-color .25s, box-shadow .25s, color .25s; }
.ccf .social a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ccf .social a:hover { transform: translateY(-5px) rotate(-6deg); background: linear-gradient(135deg, var(–pink), #b4208a); border-color: transparent; color: #fff !important; box-shadow: 0 14px 26px -10px rgba(255,61,158,.8); }
/* giant outline name */
.ccf .big { font-family: var(–f-display); font-size: clamp(56px, 15.5vw, 230px); line-height: .8; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255,179,217,.22); background: linear-gradient(180deg, rgba(255,61,158,.28), rgba(255,61,158,0) 75%); -webkit-background-clip: text; background-clip: text; user-select: none; margin: 0 0 -.07em; letter-spacing: -.01em; pointer-events: none; }
/* bottom bar */
.ccf .bar { border-top: 1px solid var(–line); background: rgba(10,3,20,.55); position: relative; }
.ccf .bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding-block: 20px; color: var(–dim); font-size: 14px; }
.ccf .bar p { margin: 0; }
.ccf .bar .legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.ccf .bar a.t { color: var(–dim) !important; }
.ccf .bar .legal a { text-decoration: none !important; font-weight: 600; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.ccf .bar .legal a:hover { border-bottom-color: var(–pink); }
.ccf .bar a.t:hover { color: #fff !important; }
.ccf .top { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(–line); background: rgba(38,16,74,.7); cursor: pointer; font-family: var(–f-body); font-size: 14px; transition: background .25s, border-color .25s, transform .25s; }
.ccf .top:hover { background: linear-gradient(95deg, #d4207f, var(–pink)); border-color: transparent; transform: translateY(-3px); }
.ccf .top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 980px) {
.ccf .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.ccf .col.brand { grid-column: 1 / -1; }
.ccf .about { max-width: 52ch; }
}
@media (max-width: 720px) {
.ccf .band { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
.ccf .band .go { justify-self: start; }
}
@media (max-width: 560px) {
.ccf .cols { grid-template-columns: minmax(0, 1fr); padding-block: 56px 40px; }
.ccf .bar .wrap { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ccf * { transition: none !important; } }