/* ==========================================================================
   Inner pages (about.php, careers.php). Sections follow the reference sites
   closely — fx- after flowtrix.co, cd- after codilar.com — in the Cloudi5
   theme (red on black/white) with the site's own type. Loaded after site.css
   and home1.css, which bring the menu, footer and fonts.
   ========================================================================== */

.pg { --pg-red: var(--dbl-orange); --pg-ink: #0d0d0d; --pg-muted: #5c5c5c; --pg-line: #e6e6e6; background: #fff; color: var(--pg-ink); }
.pg-wrap { width: calc(100% - 2 * clamp(1.25rem, 5.5vw, 5rem)); max-width: 80rem; margin: 0 auto; }
:where(.pg main) img { max-width: 100%; height: auto; }

/* Shared headings ---------------------------------------------------- */
.fx-h2 { margin: 0; font-size: clamp(2.1rem, 3.6vw, 3.1rem); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.fx-center { text-align: center; }
.fx-eyebrow { margin: 0 0 1rem; color: #6b6b6b; font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.cd-h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.cd-center { text-align: center; }
.cd-outline { display: inline-flex; align-items: center; gap: .9rem; padding: 1rem 1.6rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; font-size: .98rem; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.cd-outline:hover { border-color: var(--pg-red); background: var(--pg-red); color: #fff; }
.cd-grad { background: linear-gradient(90deg, #ff8a8f, var(--pg-red) 55%, #8a050b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===================================================== Flowtrix: hero */
.fx-hero { position: relative; margin-top: calc(-1 * var(--fn-h, 66px)); padding: calc(var(--fn-h, 66px) + clamp(4rem, 8vw, 7.5rem)) 0 clamp(4rem, 7vw, 6rem); overflow: hidden; background: #f7f7f7; isolation: isolate; }
.fx-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .9) 31%, transparent 38%),
    linear-gradient(120deg, transparent 52%, rgba(255, 255, 255, .8) 53%, transparent 60%),
    repeating-linear-gradient(120deg, rgba(0, 0, 0, .018) 0 2px, transparent 2px 22px),
    radial-gradient(60% 50% at 50% 0%, rgba(216, 8, 16, .07), transparent 70%); }
.fx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: start; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.fx-hero__h { max-width: 14ch; margin: 0; font-size: clamp(2.6rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.05em; }
.fx-hero__side p { margin: 0 0 2rem; color: #4a4a4a; font-size: 1.05rem; line-height: 1.6; }
.fx-hero__btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.fx-pill { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: .6rem; min-width: 12rem; padding: .95rem 1.5rem; border: 1px solid #e3e3e3; border-radius: 999px; background: #fff; box-shadow: 0 1px 0 #fff inset, 0 8px 22px -12px rgba(0, 0, 0, .25); color: #222; font-size: 1.05rem; text-decoration: none; transition: border-color .3s, color .3s, box-shadow .3s; }
.fx-pill:hover { border-color: var(--pg-red); color: var(--pg-red); box-shadow: 0 10px 26px -12px rgba(216, 8, 16, .45); }
.fx-pill i { transition: transform .3s; }
.fx-pill:hover i { transform: translateX(4px); }

/* Photo stack: three framed cards; the front one cycles to the back. */
.fx-stack { position: relative; aspect-ratio: 16 / 7.6; }
.fx-stack__card { position: absolute; inset: 0; margin: 0; padding: .8rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .9s; }
.fx-stack__card img { width: 100%; height: 100%; border-radius: .8rem; object-fit: cover; }
.fx-stack__card figcaption { position: absolute; left: 2rem; bottom: 2rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: .5rem; background: rgba(60, 60, 60, .6); color: #fff; font-size: 1rem; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fx-stack__card figcaption i { color: #ff8a8f; }
.fx-stack__card[data-pos="0"] { z-index: 3; transform: none; }
.fx-stack__card[data-pos="1"] { z-index: 2; transform: translateY(-1.6rem) scale(.94) rotate(-1.2deg); }
.fx-stack__card[data-pos="2"] { z-index: 1; transform: translateY(1.6rem) scale(.96) rotate(1.4deg); }
.fx-stack__card[data-pos="out"] { z-index: 4; opacity: 0; transform: translateY(-3rem) rotate(-3deg) scale(1.02); }

/* ====================================================== Codilar: focus */
.cd-focus { padding: clamp(3.5rem, 6vw, 3rem) 0; background: #f8f9fb; }
.cd-focus__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cd-focus__text p { margin: 1.75rem 0 2rem; color: #222; font-size: 1.05rem; line-height: 1.8; }
.cd-focus__text strong { color: #000; font-weight: 700; }
.cd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.cd-stat { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 12rem; padding: 1.5rem; overflow: hidden; border-radius: 1.5rem; background: #161616; color: #fff; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); }
.cd-stat--wide { grid-column: 1 / -1; }
.cd-stat b { position: relative; font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.cd-stat > span { position: relative; margin-top: .4rem; font-size: 1.1rem; }
.cd-stat__art { position: absolute; right: -.5rem; bottom: -2.5rem; color: rgba(216, 8, 16, .35); font-size: 11rem; line-height: 1; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.cd-stat--wide .cd-stat__art { right: 1rem; bottom: -3rem; font-size: 13rem; }
.cd-stat:hover .cd-stat__art { transform: rotate(-8deg) scale(1.06); }

/* ==================================================== Flowtrix: results */
.fx-results { padding: clamp(5rem, 9vw, 8rem) 0; background: #fff; }
.fx-results .fx-h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.fx-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 21rem auto; gap: 1rem; }
.fx-tile { position: relative; overflow: hidden; border: 1px solid var(--pg-line); border-radius: .6rem; background: #fff; box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .25); }
.fx-tile--brand, .fx-tile--hot { display: flex; flex-direction: column; border: 0; color: #fff; isolation: isolate; }
.fx-tile--brand { align-items: center; justify-content: center; padding: .75rem; background: linear-gradient(140deg, #ff4b52, var(--pg-red) 45%, #7d0409); box-shadow: 0 18px 40px -18px rgba(216, 8, 16, .6); }
.fx-tile--brand::before, .fx-tile--hot::before { content: ''; position: absolute; inset: .75rem; z-index: -1; border-radius: .5rem; background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.fx-tile--brand img { width: 46%; filter: brightness(0) invert(1); }
.fx-tile__tag { position: absolute; left: 3.25rem; right: 3.25rem; bottom: .75rem; padding: .45rem; border-radius: .35rem .35rem 0 0; background: #1a0103; font-size: .85rem; font-weight: 600; text-align: center; }
.fx-tile__shine { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .25) 45%, transparent 55%); transform: translateX(-100%); animation: fx-shine 6s ease-in-out infinite; }
@keyframes fx-shine { 50%, 100% { transform: translateX(100%); } }
.fx-tile--num { display: flex; flex-direction: column; justify-content: space-between; padding: 2.75rem 1.75rem 2rem; }
.fx-tile--num > span { color: #3d3d3d; font-size: 1.2rem; }
.fx-tile--num div { display: flex; align-items: flex-end; justify-content: space-between; }
.fx-tile--num b { font-size: clamp(3rem, 4vw, 3.6rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.fx-tile--num i { color: #7a7a7a; font-size: 2rem; }
.fx-rows { display: grid; gap: 1rem; }
.fx-tile--row { display: flex; align-items: center; justify-content: space-between; padding: 2rem; font-size: 1.05rem; font-weight: 600; }
.fx-tile__logo { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.2rem; }
.fx-tile__logo img { width: 1.75rem; height: 1.75rem; }
.fx-tile--logos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; color: #3d3d3d; font-size: 1.15rem; }
.fx-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 1.75rem; }
.fx-logos img { width: auto; height: 1.9rem; max-width: 6rem; object-fit: contain; opacity: .8; transition: opacity .3s, transform .3s; }
.fx-logos img:hover { opacity: 1; transform: scale(1.06); }
.fx-tile--hot { justify-content: space-between; padding: 2.75rem 2.75rem 2.5rem; background: linear-gradient(150deg, #ff7a3d, #ff4b2b 45%, var(--pg-red)); box-shadow: 0 18px 40px -18px rgba(255, 75, 43, .6); }
.fx-tile--hot b { font-size: clamp(2.8rem, 4vw, 3.6rem); font-weight: 700; line-height: 1; opacity: .9; }
.fx-tile--hot > span:not(.fx-tile__shine) { max-width: 18rem; font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
.fx-tile__art { position: absolute; right: -1rem; bottom: -1rem; z-index: -1; color: rgba(255, 255, 255, .22); font-size: 13rem; line-height: 1; }

/* ============================================ Codilar: vision / mission */
.cd-vm { padding: clamp(4rem, 7vw, 6rem) 0; background: #000; color: #fff; }
.cd-vm__row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; margin-bottom: 4rem; }
.cd-vm__label { margin: 0; line-height: 1; }
.cd-vm__label small { display: block; margin-bottom: .2rem; color: #8a8a8a; font-size: 1.05rem; text-transform: uppercase; }
.cd-vm__label b { font-size: 2.6rem; font-weight: 400; background: linear-gradient(90deg, #ff8a8f, var(--pg-red) 60%, #a1060d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-vm__big { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.35rem); font-weight: 400; line-height: 1.4; }
.cd-vm__small { margin: 0; max-width: 62rem; font-size: 1.05rem; line-height: 1.6; }
.cd-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-left: calc(13rem + 1.5rem); }
.cd-pillar { position: relative; min-height: 26rem; padding: 1.75rem 1.5rem; border: 1px solid #2c2c2c; border-radius: 1.5rem; transition: border-color .4s, background .4s; }
.cd-pillar:hover { border-color: rgba(216, 8, 16, .6); background: #0b0b0b; }
.cd-pillar__ico { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin-bottom: 2.5rem; border: 3px solid var(--pg-red); border-radius: 50%; color: var(--pg-red); font-size: 1.6rem; }
.cd-pillar h3 { margin: 0 0 .9rem; font-size: 1.45rem; font-weight: 400; line-height: 1.3; }
.cd-pillar p { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.cd-pillar__n { position: absolute; right: 2rem; bottom: 1.25rem; font-size: 3.6rem; font-weight: 700; line-height: 1; background: linear-gradient(180deg, #ff7a3d, var(--pg-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================== Codilar: core values */
.cd-values { padding: clamp(4rem, 7vw, 6rem) 0; background: #fff; }
.cd-values .cd-h2 { margin-bottom: 2.5rem; }
.cd-value { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.55fr); align-items: center; gap: 1rem; padding: 2.25rem 0; border-bottom: 1px solid var(--pg-line); }
.cd-value__ico { padding-left: .5rem; font-size: 3.4rem; line-height: 1; background: linear-gradient(135deg, #ff8a8f, var(--pg-red) 55%, #7d0409); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.cd-value:hover .cd-value__ico { transform: scale(1.12) rotate(-6deg); }
.cd-value h3 { margin: 0; font-size: 1.75rem; font-weight: 400; background: linear-gradient(90deg, #ff6a70, var(--pg-red) 50%, #8a050b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-value p { margin: 0; color: #222; font-size: 1.05rem; line-height: 1.65; }

/* ============================================ Flowtrix: founder letter */
.fx-letter { position: relative; padding: clamp(5rem, 9vw, 8rem) 0; overflow: hidden; background: #fff; isolation: isolate; }
.fx-letter__scene { position: absolute; inset: 12% 0 6%; z-index: -1; display: flex; justify-content: space-between; pointer-events: none; }
.fx-letter__scene img { width: 26%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.7) brightness(1.35); opacity: .22; -webkit-mask: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 75%); mask: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 75%); }
.fx-letter .fx-h2 { margin-bottom: 3.5rem; }
.fx-card { position: relative; max-width: 47rem; margin: 0 auto; transform: rotate(-1.4deg); }
.fx-card::before { content: ''; position: absolute; inset: 1rem -.5rem -.75rem 0; z-index: -1; border-radius: .25rem; background: #fafafa; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .25); transform: rotate(1.6deg); }
.fx-card__paper { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 25rem; overflow: hidden; border-radius: .25rem; background: linear-gradient(180deg, #ececec, #f3f3f3); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .4), inset 0 0 40px rgba(0, 0, 0, .04); }
.fx-card__text { display: flex; flex-direction: column; padding: 1.4rem 1.5rem; color: #2b2b2b; font-size: .95rem; line-height: 1.6; }
.fx-card__marks { display: flex; gap: .2rem; margin-bottom: 1.4rem; }
.fx-card__marks i { width: .95rem; height: .95rem; border: 1.5px solid #4a4a4a; border-radius: 2px; }
.fx-card__text p { margin: 0 0 .9rem; }
.fx-card__sign { display: flex; flex-direction: column; margin-top: auto; padding-top: 1.5rem; }
.fx-card__script { margin-bottom: .6rem; font-size: 2rem; line-height: 1; transform: rotate(-4deg); transform-origin: left; }
body.home1 main .fx-card__script { font-family: var(--dbl-serif) !important; font-style: italic; }
.fx-card__sign b { font-size: .95rem; font-weight: 500; }
.fx-card__sign small { color: #666; font-size: .9rem; }
.fx-card__art { position: relative; }
.fx-card__art > img { position: absolute; right: -6%; bottom: -4%; width: 108%; height: auto; filter: grayscale(1) contrast(1.25) brightness(1.08); mix-blend-mode: multiply; opacity: .78; -webkit-mask: linear-gradient(90deg, transparent, #000 28%), linear-gradient(0deg, #000 70%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 28%) intersect, linear-gradient(0deg, #000 70%, transparent); }
.fx-card__waves { position: absolute; top: 2.6rem; left: -2rem; width: 11rem; stroke: rgba(216, 8, 16, .55); stroke-width: 1.4; }
.fx-card__stamp { position: absolute; top: .5rem; right: 1.25rem; display: grid; place-items: center; width: 8rem; height: 8rem; border: 3px solid rgba(216, 8, 16, .55); border-radius: 50%; transform: rotate(-12deg); }
.fx-card__stamp::after { content: ''; position: absolute; inset: .55rem; border: 1.5px dashed rgba(216, 8, 16, .5); border-radius: 50%; }
.fx-card__stamp img { width: 50%; opacity: .75; filter: sepia(1) saturate(6) hue-rotate(-30deg) brightness(.9); }
.fx-card__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(216, 8, 16, .7); font-size: 8.4px; font-weight: 700; letter-spacing: 1.2px; animation: fx-spin 30s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ================================================ Codilar: leadership */
.cd-lead { padding: clamp(4rem, 7vw, 5.5rem) 0 clamp(3rem, 5vw, 4rem); background: #161616; color: #fff; }
.cd-lead .cd-h2 { margin-bottom: 4rem; }
.cd-lead__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; }
.cd-leader { width: min(20rem, 100%); text-align: center; }
.cd-leader__img { aspect-ratio: 1 / 1.05; overflow: hidden; border-radius: .6rem; background: #000; }
.cd-leader__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .6s, transform .8s cubic-bezier(.22, 1, .36, 1); }
.cd-leader:hover .cd-leader__img img { filter: none; transform: scale(1.04); }
.cd-leader h3 { margin: 1.75rem 0 .5rem; font-size: 1.5rem; font-weight: 500; }
.cd-leader p { margin: 0; font-size: 1.05rem; }

/* ===================================================== Flowtrix: team */
.fx-team { padding: clamp(5rem, 9vw, 7.5rem) 0; background: #fff; }
.fx-team .fx-h2 { margin-bottom: 4rem; }
.fx-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fx-member { position: relative; aspect-ratio: 1 / 1.09; overflow: hidden; border-radius: .5rem; background: #dcd8d2; }
.fx-member img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.fx-member:hover img { transform: scale(1.05); }
.fx-member__cap { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; display: flex; flex-direction: column; gap: .4rem; padding: .9rem 1rem; border-radius: .35rem; background: linear-gradient(90deg, rgba(40, 40, 40, .75), rgba(60, 60, 60, .55)); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .4s; }
.fx-member:hover .fx-member__cap { background: linear-gradient(90deg, rgba(150, 4, 10, .85), rgba(216, 8, 16, .65)); }
.fx-member__cap b { font-size: 1.1rem; font-weight: 600; }
.fx-member__cap span { color: rgba(255, 255, 255, .8); font-size: .95rem; }

/* ===================================================== Codilar: join */
.cd-join { position: relative; height: clamp(34rem, 52vw, 46rem); overflow: hidden; background: #fff; }
.cd-join__arc { position: absolute; left: 50%; top: 2rem; width: clamp(60rem, 100vw, 96rem); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; }
.cd-join__wheel { position: absolute; inset: 0; animation: cd-wheel 80s linear infinite; }
@keyframes cd-wheel { to { transform: rotate(360deg); } }
.cd-join__wheel img { position: absolute; left: 50%; top: 0; width: clamp(9rem, 14vw, 13rem); aspect-ratio: 3 / 3.4; margin-left: calc(clamp(9rem, 14vw, 13rem) / -2); border-radius: 1.4rem; object-fit: cover; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .5); transform-origin: 50% calc(clamp(60rem, 100vw, 96rem) / 2); transform: rotate(var(--a)); }
.cd-join__text { position: absolute; left: 50%; bottom: clamp(3rem, 6vw, 5rem); width: min(40rem, 92%); text-align: center; transform: translateX(-50%); }
.cd-join__text h2 { margin: 0 0 1rem; color: #1a1a1a; font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 400; line-height: 1.2; }
.cd-join__text p { margin: 0 0 1.75rem; color: #555; font-size: 1.15rem; }
.cd-join .reveal { transform: translate(-50%, 26px); }
.cd-join .reveal.is-in { transform: translate(-50%, 0); }

/* =================================================== Codilar: contact */
.cd-contact { padding: clamp(4rem, 7vw, 5rem) 0; background: #000; color: #fff; }
.cd-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.cd-contact__img { position: relative; aspect-ratio: 1 / .94; overflow: hidden; }
.cd-contact__img img { width: 100%; height: 100%; object-fit: cover; }
.cd-contact__img::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9)); }
.cd-contact__links { position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 1; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-evenly; gap: 1.25rem 2rem; }
.cd-contact__links a { color: #fff; font-size: 1.05rem; text-decoration: none; transition: color .3s; }
.cd-contact__links a i { color: var(--pg-red); font-size: .8rem; }
.cd-contact__links a:hover { color: #ff8a8f; }
.cd-form__h { margin: 0; font-size: 2.1rem; font-weight: 500; line-height: 1.1; }
.cd-form__h span { color: var(--pg-red); }
.cd-form__sub { margin: .35rem 0 1.5rem; color: #a8a8a8; font-size: 1rem; }
.cd-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cd-in { position: relative; display: block; }
.cd-in--full { grid-column: 1 / -1; }
.cd-in input, .cd-in textarea, .cd-in select { width: 100%; padding: 1.55rem 1rem .55rem; border: 1px solid #5a5a5a; border-radius: .6rem; background: transparent; color: #fff; font: inherit; font-size: 1rem; outline: none; transition: border-color .3s; }
.cd-in textarea { resize: vertical; }
.cd-in select { padding: 1.05rem 2.5rem 1.05rem 1rem; appearance: none; cursor: pointer; }
.cd-in select option, .cd-in select optgroup { background: #111; color: #fff; }
.cd-in--select > i { position: absolute; top: 50%; right: 1rem; font-size: .8rem; transform: translateY(-50%); pointer-events: none; }
.cd-in input:focus, .cd-in textarea:focus, .cd-in select:focus { border-color: var(--pg-red); }
.cd-in > span:not(.cd-in__cc), .cd-in label > span { position: absolute; left: 1rem; top: 1.1rem; color: #ddd; font-size: 1rem; pointer-events: none; transition: top .2s, font-size .2s, color .2s; }
.cd-in > span i, .cd-in label > span i { color: var(--pg-red); font-style: normal; }
.cd-in input:focus + span, .cd-in input:not(:placeholder-shown) + span, .cd-in textarea:focus + span, .cd-in textarea:not(:placeholder-shown) + span { top: .4rem; color: #9a9a9a; font-size: .75rem; }
.cd-in--tel { display: flex; border: 1px solid #5a5a5a; border-radius: .6rem; transition: border-color .3s; }
.cd-in--tel:focus-within { border-color: var(--pg-red); }
.cd-in--tel label { position: relative; flex: 1; }
.cd-in--tel input { border: 0; }
.cd-in__cc { position: static; display: grid; place-items: center; padding: 0 .9rem; border-right: 1px solid #5a5a5a; font-size: .9rem; white-space: nowrap; }
.cd-in.is-bad input, .cd-in.is-bad select, .cd-in--tel.is-bad { border-color: #ff6a70; }
.cd-submit { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; margin-top: 1rem; padding: 1rem; border: 0; border-radius: 999px; background: #e8232a; color: #fff; font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background .3s; }
.cd-submit:hover { background: var(--pg-red); }
.cd-submit[disabled] { opacity: .6; cursor: progress; }
.cd-form__status { margin: 1rem 0 0; font-size: .95rem; }
.cd-form__status.is-ok { color: #6ee7a8; }
.cd-form__status.is-err { color: #ff8a8f; }

/* ======================================================== Flowtrix: CTA */
.fx-cta { position: relative; padding: clamp(5rem, 9vw, 7rem) 0 clamp(5rem, 8vw, 6.5rem); overflow: hidden; background: #111214; color: #fff; isolation: isolate; }
.fx-cta::before { content: ''; position: absolute; left: -10%; right: -10%; top: -12rem; z-index: -1; height: 22rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 222, .95), rgba(255, 90, 98, .7) 35%, rgba(216, 8, 16, .35) 65%, transparent); filter: blur(30px); }
.fx-cta__rings { position: absolute; left: 50%; top: 14rem; z-index: -1; width: 0; height: 0; }
.fx-cta__rings i { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(255, 255, 255, .07); border-radius: 50%; transform: translate(-50%, -50%); }
.fx-cta__rings i:nth-child(1) { width: 26rem; height: 26rem; border-style: solid; }
.fx-cta__rings i:nth-child(2) { width: 42rem; height: 42rem; }
.fx-cta__rings i:nth-child(3) { width: 60rem; height: 60rem; }
.fx-cta__rings i:nth-child(4) { width: 80rem; height: 80rem; }
.fx-cta__rings b { position: absolute; width: .55rem; height: .55rem; margin: -.275rem; border-radius: 50%; background: var(--pg-red); box-shadow: 0 0 12px var(--pg-red); animation: fx-orbit 16s linear infinite; }
.fx-cta__rings b:nth-of-type(1) { --r: 13rem; }
.fx-cta__rings b:nth-of-type(2) { --r: 21rem; animation-duration: 24s; animation-delay: -6s; }
.fx-cta__rings b:nth-of-type(3) { --r: 21rem; animation-duration: 24s; animation-delay: -18s; }
.fx-cta__rings b:nth-of-type(4) { --r: 30rem; animation-duration: 34s; animation-delay: -10s; }
@keyframes fx-orbit { from { transform: rotate(0) translateX(var(--r)); } to { transform: rotate(360deg) translateX(var(--r)); } }
.fx-cta__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fx-cta__orb { display: grid; place-items: center; width: 15.5rem; height: 15.5rem; margin-bottom: 4.5rem; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #151517 48%, rgba(21, 21, 23, 0) 62%), conic-gradient(from 210deg, #ffb3b6, #ff4b52, #7d0409, #ff6a70, #ffd6d8, #ff4b52, #ffb3b6); box-shadow: 0 0 60px rgba(216, 8, 16, .45), inset 0 0 20px rgba(0, 0, 0, .6); animation: fx-orb 9s ease-in-out infinite alternate; }
.fx-cta__orb img { width: 42%; filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(216, 8, 16, .6)); }
@keyframes fx-orb { to { box-shadow: 0 0 90px rgba(216, 8, 16, .65), inset 0 0 20px rgba(0, 0, 0, .6); filter: hue-rotate(-8deg); } }
.fx-cta__h { max-width: 16ch; margin: 0 0 2.5rem; font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.05em; }
.fx-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.fx-cta__btn { display: inline-flex; align-items: center; gap: 1rem; padding: .3rem .3rem .3rem 1.1rem; border: 1px solid #fff; border-radius: .35rem; background: #fff; color: #111; font-size: 1.15rem; font-weight: 500; text-decoration: none; transition: transform .3s; }
.fx-cta__btn i { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .25rem; background: #1d1d1f; color: #fff; transition: background .3s; }
.fx-cta__btn:hover { transform: translateY(-2px); }
.fx-cta__btn:hover i { background: var(--pg-red); }
.fx-cta__btn--red { padding: .3rem 1.4rem; border-color: #ff6a70; background: linear-gradient(180deg, #ff3b42, #a5060d); box-shadow: 0 0 0 4px rgba(216, 8, 16, .25), inset 0 1px 0 rgba(255, 255, 255, .3); color: #fff; font-weight: 600; min-height: 3.4rem; }

/* ============================================================ Responsive */
@media (max-width: 1100px) {
    .cd-pillars { margin-left: 0; gap: 1.25rem; }
    .fx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
    .fx-tile--brand { min-height: 18rem; }
    .fx-tile--num { min-height: 15rem; }
}
@media (max-width: 860px) {
    .fx-hero__grid, .cd-focus__grid, .cd-contact__grid { grid-template-columns: 1fr; }
    .fx-stack { aspect-ratio: 4 / 3; }
    .cd-vm__row { grid-template-columns: 1fr; }
    .cd-pillars { grid-template-columns: 1fr; }
    .cd-pillar { min-height: 17rem; }
    .cd-value { grid-template-columns: 4.5rem 1fr; }
    .cd-value p { grid-column: 2; }
    .fx-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-card { transform: none; }
    .fx-card__paper { grid-template-columns: 1fr; }
    .fx-card__art { min-height: 16rem; }
    .fx-letter__scene { display: none; }
}
@media (max-width: 560px) {
    .fx-hero__btns { flex-direction: column; }
    .fx-stack__card figcaption { left: 1.25rem; bottom: 1.25rem; font-size: .85rem; }
    .cd-stats, .fx-bento, .cd-form__grid { grid-template-columns: 1fr; }
    .fx-team__grid { gap: .6rem; }
    .fx-member__cap { padding: .6rem .7rem; }
    .fx-member__cap b { font-size: .95rem; }
    .fx-member__cap span { font-size: .8rem; }
    .cd-contact__links { grid-template-columns: repeat(2, auto); }
    .cd-join__wheel img { width: 7.5rem; margin-left: -3.75rem; transform-origin: 50% 30rem; }
    .cd-join__arc { width: 60rem; }
    .fx-cta__orb { width: 11rem; height: 11rem; margin-bottom: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fx-tile__shine, .cd-join__wheel, .fx-card__stamp svg, .fx-cta__rings b, .fx-cta__orb { animation: none; }
    .fx-stack__card { transition: none; }
}