/* Costa Studio: comic character theme. Loaded AFTER style.css so every page picks it up.
   Same identity as the personal portfolio: Costa red / paper / ink, hard shadows, halftone dots. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --red: #e21b1b;
  --red-dim: rgba(226, 27, 27, 0.3);
  --red-soft: rgba(226, 27, 27, 0.09);
  --red-soft2: rgba(226, 27, 27, 0.16);
  --bg: #f4f1ec;
  --bg2: #fbd5d2;
  --bg2-rgb: 251, 213, 210;
  --card: #fff;
  --ink: #111;
  --ink-dim: #4a4640;
  --line: rgba(17, 17, 17, 0.14);
  --nav-bg: rgba(244, 241, 236, 0.92);
  --shadow: 6px 6px 0 #111;
  --cm-bd: 3px solid #111;
  --cm-r: 22px;
  --cm-sh: 6px 6px 0 #111;
  --cm-sh-lg: 9px 9px 0 #111;
  --cm-disp: "Bebas Neue", "Cairo", sans-serif;
  --cm-body: "Cairo", system-ui, sans-serif;
  --cm-mono: "Space Mono", monospace;
  color-scheme: light;
}
html {
  scroll-padding-top: 84px;
}
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--cm-body) !important;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(rgba(17, 17, 17, 0.11) 1.4px, transparent 1.6px) 0 0/18px 18px;
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000);
  mask-image: linear-gradient(135deg, transparent 30%, #000);
}
#themeToggle,
.cursor-dot,
.cursor-ring,
.brackets,
.hero-bg-fade,
.hero-bg-logo {
  display: none !important;
}
h1,
h2,
h3,
.h-display {
  font-family: var(--cm-disp) !important;
  font-weight: 400;
  letter-spacing: 0.02em;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .h-display {
  font-family: "Cairo", sans-serif !important;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.4;
}
.hl,
h2 em,
h1 em {
  background: #111;
  color: #fff;
  padding: 0 0.16em;
  border-radius: 6px;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.custom-cursor,
html.custom-cursor * {
  cursor: auto !important;
}
html.custom-cursor a,
html.custom-cursor button {
  cursor: pointer !important;
}
/* ---- nav ---- */
#siteHeader {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(10px);
  border-bottom: var(--cm-bd) !important;
  box-shadow: none !important;
}
#siteHeader .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-word {
  font: 400 26px var(--cm-disp);
  letter-spacing: 0.06em;
}
.brand-word b {
  color: var(--red);
  font-weight: 400;
}
html[lang="ar"] .brand-word {
  font-family: "Bebas Neue", sans-serif;
}
.logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: transform 0.5s;
}
.brand:hover .logo-mark {
  transform: rotate(360deg);
}
.nav-links a {
  font: 800 16px var(--cm-body);
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 0.25s;
  transform-origin: left;
}
html[dir="rtl"] .nav-links a::after {
  transform-origin: right;
}
.nav-links a:hover::after {
  transform: scaleX(1);
}
.icon-btn {
  font: 900 14px var(--cm-body);
  border: var(--cm-bd);
  background: #fff;
  color: #111;
  border-radius: 40px;
  padding: 5px 14px;
  box-shadow: 3px 3px 0 #111;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.icon-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.nav-badge-new {
  background: var(--red);
  color: #fff;
  border: 2px solid #111;
  border-radius: 30px;
  font: 900 10px var(--cm-body);
  padding: 1px 8px;
  margin-inline-start: 6px;
}
.mobile-menu {
  background: var(--bg) !important;
  border-bottom: var(--cm-bd);
}
/* ---- buttons / pills ---- */
.btn,
.btn-primary,
.btn-outline,
.about-note-cta,
.aa-cta-btn,
.filter-btn {
  font: 900 17px var(--cm-body) !important;
  border: var(--cm-bd) !important;
  border-radius: 50px !important;
  padding: 11px 24px;
  box-shadow: 5px 5px 0 #111 !important;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
  background-image: none !important;
}
.btn:hover,
.about-note-cta:hover,
.aa-cta-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #111 !important;
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #111 !important;
}
.btn-primary,
.aa-cta-btn {
  background: var(--red) !important;
  color: #fff !important;
}
.btn-outline {
  background: #fff !important;
  color: #111 !important;
}
.filter-btn {
  background: #fff !important;
  color: #111;
  box-shadow: 3px 3px 0 #111 !important;
  padding: 6px 18px;
  font-size: 15px !important;
}
.filter-btn.active {
  background: #111 !important;
  color: #fff !important;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 900 15px var(--cm-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #111 !important;
  background: #fff;
  border: var(--cm-bd);
  border-radius: 40px;
  padding: 4px 18px;
  box-shadow: 4px 4px 0 #111;
  transform: rotate(-2deg);
}
.eyebrow .dot,
.live-dot {
  width: 9px;
  height: 9px;
  background: var(--red);
  border-radius: 50%;
}
/* ---- sections ---- */
section,
.sec-alt {
  position: relative;
}
.sec-alt {
  background: var(--bg2) !important;
}
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 46px;
}
.sec-title {
  font-size: clamp(36px, 5.2vw, 64px) !important;
  line-height: 1.15;
}
html[lang="ar"] .sec-title {
  font-size: clamp(32px, 4.6vw, 56px) !important;
}
.sec-sub {
  font: 700 clamp(17px, 1.8vw, 21px)/1.7 var(--cm-body);
  color: var(--ink-dim);
}
.divider {
  display: none;
}
/* ---- cards ---- */
.svc-card,
.why-card,
.price-card,
.testi-card,
.social-proof-card,
.portfolio-card,
.step,
.trust-cell,
.aa-svc-item,
.aa-compare-col,
.ai-feat,
.compare-col,
.about-note,
.founder-skill,
.stat-cell,
.costa-ai-panel,
.lightbox-inner,
.brief-band-inner {
  background: #fff !important;
  color: #111 !important;
  border: var(--cm-bd) !important;
  border-radius: var(--cm-r) !important;
  box-shadow: var(--cm-sh) !important;
  backdrop-filter: none !important;
}
.svc-card,
.why-card,
.portfolio-card,
.testi-card,
.price-card,
.step {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.svc-card:hover,
.why-card:hover,
.portfolio-card:hover,
.testi-card:hover,
.price-card:hover {
  transform: translate(-4px, -4px) rotate(-0.4deg);
  box-shadow: var(--cm-sh-lg) !important;
}
.svc-num,
.step-line {
  color: var(--red) !important;
  font-family: var(--cm-disp) !important;
}
.svc-icon {
  background: var(--red) !important;
  color: #fff !important;
  border: var(--cm-bd);
  border-radius: 16px;
  box-shadow: 3px 3px 0 #111;
}
.svc-icon svg {
  stroke: #fff;
}
.price-card.pop {
  background: var(--red) !important;
  color: #fff !important;
  transform: rotate(-1deg);
}
.price-card.pop * {
  color: #fff;
}
.price-card.pop .price-badge {
  background: #111;
  color: #fff;
}
.price-badge {
  background: var(--red);
  color: #fff;
  border: 2px solid #111;
  border-radius: 30px;
  padding: 2px 14px;
  font: 900 13px var(--cm-body);
}
.price-amt-value {
  font-family: var(--cm-disp) !important;
  color: var(--red);
}
.pop .price-amt-value {
  color: #fff;
}
.price-feats li::marker,
.svc-feats li::marker {
  color: var(--red);
}
.compare-col.bad {
  background: #fff !important;
}
.compare-col.good {
  background: #111 !important;
  color: #fff !important;
}
.compare-col.good * {
  color: #fff;
}
.compare-dot {
  background: var(--red);
}
.testi-quote {
  font-weight: 700;
}
.testi-av {
  border: var(--cm-bd);
  box-shadow: 3px 3px 0 #111;
}
/* ---- hero (comic) ---- */
.hero {
  background: var(--red) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 130px 0 70px !important;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2.4px) 0 0/22px 22px;
  -webkit-mask-image: linear-gradient(200deg, transparent 35%, #000);
  mask-image: linear-gradient(200deg, transparent 35%, #000);
}
.hero .wrap {
  position: relative;
  z-index: 2;
}
.cm-blob {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: min(46vw, 560px);
  fill: #111;
  z-index: 1;
  animation: cmblob 9s ease-in-out infinite alternate;
  transform-origin: top right;
}
html[dir="rtl"] .cm-blob {
  inset-inline-end: auto;
  left: 0;
  transform: scaleX(-1);
}
@keyframes cmblob {
  to {
    transform: scale(1.08) rotate(1.5deg);
  }
}
.cm-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 30px;
  align-items: center;
}
.hero .h-display {
  font-size: clamp(46px, 7.4vw, 104px) !important;
  line-height: 1.05;
  margin: 20px 0 16px;
  color: #fff;
  text-shadow: 5px 5px 0 #111;
}
html[lang="ar"] .hero .h-display {
  font-size: clamp(40px, 6vw, 82px) !important;
  line-height: 1.45;
}
.hero .h-display .hl,
.hero mark {
  background: #111;
  color: #fff;
  text-shadow: none;
}
.hero .eyebrow-hero {
  background: #fff;
}
.hero p {
  font: 700 clamp(17px, 1.9vw, 23px)/1.7 var(--cm-body);
  color: #fff;
  max-width: 600px;
}
.hero .hero-hook {
  background: rgba(17, 17, 17, 0.35);
  border-inline-start: 5px solid #fff;
  padding: 10px 16px;
  border-radius: 0 14px 14px 0;
}
.hero .btn-primary {
  background: #fff !important;
  color: #111 !important;
}
.hero .btn-outline {
  background: #111 !important;
  color: #fff !important;
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 26px 0;
}
.cm-art {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 520px;
}
.cm-disc-wrap {
  position: absolute;
  inset: auto 0 0 0;
  aspect-ratio: 1;
  max-width: 470px;
  margin-inline: auto;
  perspective: 1000px;
}
.cm-disc {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.cm-disc .face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  border: var(--cm-bd);
  box-shadow: 10px 10px 0 #111;
}
.cm-disc .ring {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 3px dashed var(--red);
  opacity: 0.6;
  transform: translateZ(24px);
}
.cm-disc .mark {
  position: absolute;
  width: 58%;
  left: 21%;
  top: 50%;
  margin-top: -30%;
  transform: translateZ(80px);
  filter: drop-shadow(0 12px 0 rgba(17, 17, 17, 0.2));
}
.cm-char {
  position: relative;
  z-index: 3;
  height: min(620px, 70vh);
  width: auto;
  filter: drop-shadow(0 12px 0 rgba(17, 17, 17, 0.15));
  animation: cmbob 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cmbob {
  50% {
    translate: 0 -12px;
    rotate: 1deg;
  }
}
.cm-sticker {
  position: absolute;
  z-index: 4;
  font: 400 28px var(--cm-disp);
  background: #111;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 999px;
  padding: 2px 18px;
  transform: rotate(-8deg);
  top: 2%;
  inset-inline-start: 2%;
}
html[lang="ar"] .cm-sticker {
  font: 900 19px var(--cm-body);
}
.cm-star {
  position: absolute;
  width: 44px;
  height: 44px;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  z-index: 4;
  animation: cmtw 2.6s ease-in-out infinite;
}
.cm-star.a {
  top: 14%;
  inset-inline-end: 6%;
}
.cm-star.b {
  bottom: 10%;
  inset-inline-start: 2%;
  width: 30px;
  height: 30px;
  animation-delay: 0.9s;
}
@keyframes cmtw {
  0%,
  100% {
    transform: scale(0.85) rotate(0);
  }
  50% {
    transform: scale(1.2) rotate(35deg);
  }
}
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 34px;
}
.stat-cell {
  padding: 14px 10px;
  text-align: center;
}
.stat-num {
  font: 400 clamp(34px, 4vw, 52px)/1 var(--cm-disp);
  color: var(--red);
}
.stat-lbl {
  font: 800 14px var(--cm-body);
  color: #111;
  margin-top: 4px;
}
.pillars {
  display: none;
}
/* ---- marquee ---- */
.marquee-wrap {
  background: #111 !important;
  border-block: var(--cm-bd);
  padding: 14px 0;
  overflow: hidden;
}
.marquee-item {
  font: 400 34px/1 var(--cm-disp) !important;
  color: #fff !important;
  letter-spacing: 0.06em;
}
.marquee-item:nth-child(even) {
  color: transparent !important;
  -webkit-text-stroke: 1.5px #fff;
}
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trust-cell {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
}
.trust-cell svg {
  stroke: var(--red);
  flex: none;
  width: 30px;
  height: 30px;
}
.trust-cell b {
  display: block;
  font-weight: 900;
}
.trust-cell span {
  font-size: 14px;
  color: var(--ink-dim);
}
/* ---- about / founder ---- */
.about-mark {
  display: grid;
  place-items: center;
}
.logo-real-wrap {
  border: var(--cm-bd);
  border-radius: var(--cm-r);
  box-shadow: var(--cm-sh);
  overflow: hidden;
  background: #fff;
}
.about-note {
  padding: 20px;
  margin-top: 22px;
  transform: rotate(-0.6deg);
}
.about-note-tag {
  background: var(--red);
  color: #fff;
  border: 2px solid #111;
  border-radius: 30px;
  padding: 2px 14px;
  font: 900 13px var(--cm-body);
}
.about-note-chip {
  border: 2px solid #111;
  border-radius: 30px;
  background: #fff;
  padding: 2px 12px;
  font: 700 13px var(--cm-body);
}
.founder-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}
.founder-photo {
  position: relative;
  background: var(--red);
  border: var(--cm-bd);
  border-radius: var(--cm-r);
  box-shadow: var(--cm-sh-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  display: grid;
  place-items: end center;
}
.founder-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.22) 2px, transparent 2.4px) 0 0/20px 20px;
}
.founder-photo img {
  position: relative;
  width: 88%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 10px 0 rgba(17, 17, 17, 0.2));
}
.founder-id {
  margin-top: 20px;
}
.founder-id b {
  font: 900 28px var(--cm-body);
  display: block;
}
.founder-id span {
  font: 700 16px var(--cm-body);
  color: var(--ink-dim);
}
.founder-quote {
  font: 900 clamp(22px, 2.6vw, 32px)/1.5 var(--cm-body);
  border-inline-start: 6px solid var(--red);
  padding-inline-start: 16px;
}
.founder-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.founder-stat {
  padding: 12px;
  text-align: center;
}
.founder-stat b {
  display: block;
  font: 400 38px/1 var(--cm-disp);
  color: var(--red);
}
.founder-stat span {
  font: 800 13px var(--cm-body);
}
.founder-skill {
  padding: 16px;
}
.founder-skill-lvl {
  background: var(--red);
  color: #fff;
  border: 2px solid #111;
  border-radius: 30px;
  padding: 1px 12px;
  font: 900 12px var(--cm-body);
}
.founder-tool {
  border: 2px solid #111;
  border-radius: 30px;
  background: #fff;
  padding: 1px 11px;
  font: 700 12px var(--cm-body);
}
/* ---- process / cta / footer ---- */
.cta-sec {
  background: var(--red) !important;
  color: #fff !important;
  border-block: var(--cm-bd);
}
.cta-sec .h-display {
  color: #fff;
  text-shadow: 4px 4px 0 #111;
}
.cta-sec .btn {
  background: #fff !important;
  color: #111 !important;
}
footer,
.foot-top,
.foot-bottom {
  background: #111 !important;
  color: #fff !important;
}
footer a:hover {
  color: var(--red);
}
.foot-brand .brand-word {
  color: #fff;
}
/* ---- showcase / video ---- */
.showcase-video-block {
  border: var(--cm-bd);
  border-radius: var(--cm-r);
  box-shadow: var(--cm-sh-lg);
  overflow: hidden;
  background: #111;
}
.showcase-bg-fade {
  display: none;
}
.showcase-sound-btn {
  background: var(--red) !important;
  border: var(--cm-bd) !important;
  box-shadow: 4px 4px 0 #111;
}
/* ---- ai agent / ai studio sections ---- */
.aa-badge,
.aa-kicker {
  background: var(--red);
  color: #fff;
  border: 2px solid #111;
  border-radius: 30px;
  padding: 2px 14px;
  font: 900 13px var(--cm-body);
}
.ai-visual,
.aa-visual-img {
  border: var(--cm-bd);
  border-radius: var(--cm-r);
  box-shadow: var(--cm-sh);
  overflow: hidden;
}
.aa-svc-icon {
  background: var(--red);
  color: #fff;
  border: 2px solid #111;
  border-radius: 14px;
}
/* ---- portfolio page ---- */
.portfolio-card-media {
  border-bottom: var(--cm-bd);
  background: var(--bg2);
}
.portfolio-card-cat {
  background: var(--red);
  color: #fff;
  border: 2px solid #111;
  border-radius: 30px;
  padding: 1px 12px;
  font: 900 12px var(--cm-body);
}
.portfolio-card-title {
  font-family: var(--cm-disp);
  font-size: 26px;
}
.cs-hero {
  background: var(--red);
  color: #fff;
}
.cs-title {
  font-family: var(--cm-disp);
  text-shadow: 4px 4px 0 #111;
}
.cs-meta-cell,
.cs-step,
.cs-chip {
  background: #fff;
  color: #111;
  border: var(--cm-bd);
  border-radius: 18px;
  box-shadow: 4px 4px 0 #111;
}
/* ---- floating widgets ---- */
.float-wa {
  border: var(--cm-bd) !important;
  box-shadow: 4px 4px 0 #111 !important;
}
.costa-ai-launcher {
  border: var(--cm-bd) !important;
  box-shadow: 4px 4px 0 #111 !important;
}
.costa-ai-head {
  background: var(--red) !important;
  color: #fff !important;
  border-bottom: var(--cm-bd);
}
.msg-bot {
  background: var(--bg2) !important;
  color: #111 !important;
  border: 2px solid #111;
}
.msg-user {
  background: var(--red) !important;
  color: #fff !important;
  border: 2px solid #111;
}
.costa-ai-chip {
  border: 2px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
  border-radius: 30px;
}
input,
textarea,
select {
  font-family: var(--cm-body);
}
/* ---- intro splash ---- */
.intro-splash {
  background: var(--red) !important;
}
.intro-glow,
.intro-rings {
  display: none;
}
.intro-logo {
  filter: drop-shadow(8px 8px 0 #111);
}
/* ---- responsive ---- */
@media (max-width: 980px) {
  .cm-hero-grid,
  .founder-grid {
    grid-template-columns: 1fr;
  }
  .cm-art {
    min-height: 420px;
    order: -1;
  }
  .nav-links {
    display: none;
  }
  .stats-bar,
  .trust-strip,
  .founder-stats {
    grid-template-columns: 1fr 1fr;
  }
  .cm-char {
    height: min(440px, 52vh);
  }
}
@media (max-width: 560px) {
  .stats-bar,
  .trust-strip {
    grid-template-columns: 1fr 1fr;
  }
  .founder-stats {
    grid-template-columns: 1fr 1fr;
  }
  .hero {
    padding-top: 104px !important;
  }
  .btn,
  .btn-primary,
  .btn-outline {
    padding: 10px 20px;
    font-size: 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-blob,
  .cm-char,
  .cm-star {
    animation: none;
  }
}

/* ---- layout fixes (hero grid, nav, mobile) ---- */
.hero .hero-inner,
.hero .wrap {
  display: block !important;
  max-width: 1180px !important;
  width: min(1180px, 100% - 40px) !important;
  text-align: start !important;
  margin-inline: auto;
}
.hero .h-display,
.hero p,
.hero .hero-hook {
  max-width: none !important;
  text-align: start !important;
}
.cm-hero-grid > div:first-child {
  min-width: 0;
}
.hero .hero-btns {
  justify-content: flex-start;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-links a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
#navCta {
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .nav-links {
    gap: 14px;
  }
  .nav-links a {
    font-size: 14px;
  }
}

/* ---- layout fixes (hero mark, nav links) ---- */
.cm-disc .mark {
  height: auto !important;
}
.cm-blob {
  width: min(46vw, 560px) !important;
  height: auto !important;
}
@media (max-width: 980px) {
  .nav-links {
    display: none !important;
  }
  .cm-disc-wrap {
    max-width: 340px;
  }
}
@media (max-width: 560px) {
  .cm-art {
    min-height: 380px;
  }
  .cm-char {
    height: min(360px, 46vh);
  }
  .hero .h-display {
    margin-top: 30px;
  }
}

/* ---- logo-only hero ---- */
.cm-art {
  place-items: center;
  min-height: 480px;
}
.cm-disc-wrap {
  position: relative !important;
  inset: auto !important;
  width: min(500px, 100%);
  max-width: none !important;
  margin: 0 auto;
}
.cm-disc .mark {
  width: 64%;
  left: 18%;
  margin-top: -32%;
}
@media (max-width: 980px) {
  .cm-art {
    min-height: 340px;
  }
  .cm-disc-wrap {
    width: min(340px, 86%);
  }
}

/* ===== OVERRIDES 1: header, hero clean-up, frames, widgets ===== */
/* header: always solid, never sits on the red hero */
#siteHeader {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 300;
  background: rgba(244, 241, 236, 0.96) !important;
  backdrop-filter: blur(10px);
}
#siteHeader .wrap {
  min-height: 70px;
}
.nav-links {
  gap: 24px;
}
.nav-links a {
  color: #111 !important;
}
.nav-links .nav-ai-agent {
  color: var(--red) !important;
  font-weight: 900;
}
.logo-mark {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
}
.cm-spin {
  animation: cmspin 6s linear infinite;
  transform-style: preserve-3d;
}
@keyframes cmspin {
  0% {
    transform: perspective(300px) rotateY(0);
  }
  100% {
    transform: perspective(300px) rotateY(360deg);
  }
}
.brand:hover .logo-mark {
  transform: none;
}
/* hero: no black blob, one short line, no overlapping highlight boxes */
.cm-blob {
  display: none !important;
}
.hero .hero-hook {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font: 700 clamp(18px, 2vw, 23px)/1.7 var(--cm-body) !important;
  color: #fff !important;
  max-width: 560px !important;
}
.hero .h-display {
  font-size: clamp(44px, 6vw, 86px) !important;
  line-height: 1.12;
}
html[lang="ar"] .hero .h-display {
  font-size: clamp(38px, 5vw, 70px) !important;
  line-height: 1.62;
}
.hl,
.h-display .hl {
  padding: 0 0.14em !important;
  border-radius: 8px;
  line-height: inherit;
  display: inline;
}
h2.h-display,
.sec-title {
  line-height: 1.3;
}
html[lang="ar"] h2.h-display,
html[lang="ar"] .sec-title {
  line-height: 1.7 !important;
}
.hero {
  min-height: auto !important;
  padding: 140px 0 80px !important;
}
/* thin grey frames instead of black slabs */
.founder-stats,
.founder-skills,
.pillars,
.ai-feats,
.why-grid,
.price-grid,
.svc-grid,
.testi-grid {
  background: none !important;
  border: 0 !important;
  gap: 16px !important;
}
.founder-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.founder-stat {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 #111 !important;
}
.founder-skills {
  display: grid;
}
/* brief band: one card, one button */
.brief-band-inner::after,
.brief-band-inner::before {
  display: none !important;
}
.brief-band-cta {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.brief-band-cta .btn {
  background: var(--red) !important;
  color: #fff !important;
}
/* AI agent block: small pills, not full-width bars */
.aa-head {
  text-align: center;
}
.aa-kicker,
.aa-badge {
  display: inline-flex !important;
  width: auto !important;
  margin-inline: auto;
  letter-spacing: 0.04em !important;
}
.aa-head .aa-kicker {
  display: table !important;
  margin: 0 auto 12px;
}
/* WhatsApp bubble removed, CST AI assistant stays */
.float-wa {
  display: none !important;
}
/* 3D logo without background (AI Studio and anywhere .cm-logo3d is used) */
.cm-logo3d {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 900px;
  min-height: 380px;
}
.cm-logo3d img {
  width: min(360px, 70%);
  height: auto;
  transform-style: preserve-3d;
  filter: drop-shadow(10px 14px 0 rgba(17, 17, 17, 0.25));
  animation: cmfloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes cmfloat {
  0% {
    transform: rotateY(-25deg) translateY(0);
  }
  50% {
    transform: rotateY(25deg) translateY(-14px);
  }
  100% {
    transform: rotateY(-25deg) translateY(0);
  }
}
.cm-logo3d::after {
  content: "";
  position: absolute;
  bottom: 8%;
  width: 46%;
  height: 18px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.18);
  filter: blur(4px);
}
/* AI Studio page */
.as-hero {
  background: var(--bg) !important;
}
.as-hero-art {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.as-hstat,
.as-seg {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 #111 !important;
}
.as-scroll-hint {
  display: none !important;
}
/* general calm: less motion noise */
.marquee-wrap {
  padding: 10px 0;
}
@media (max-width: 980px) {
  .founder-stats {
    grid-template-columns: 1fr 1fr;
  }
  .hero {
    padding: 116px 0 60px !important;
  }
  .cm-logo3d {
    min-height: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-spin,
  .cm-logo3d img {
    animation: none;
  }
}
.ai-visual.cm-logo3d {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 #111 !important;
}

/* ===== AI STUDIO PAGE: hero, studio cards, grids ===== */
.as-hero {
  min-height: auto !important;
  padding: 130px 0 70px !important;
}
.as-hero-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
}
.as-hero-copy {
  max-width: 600px !important;
}
.as-hero h1 {
  font-size: clamp(34px, 4.2vw, 60px) !important;
  line-height: 1.55 !important;
  margin: 18px 0 !important;
}
.as-hero h1 .hl {
  line-height: 1.9;
}
.as-hero-art::before {
  display: none !important;
}
.as-hero-art.cm-logo3d {
  min-height: 0 !important;
}
.as-hero-art.cm-logo3d img {
  width: min(340px, 80%) !important;
  max-height: none !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(10px 14px 0 rgba(17, 17, 17, 0.22)) !important;
  animation: cmfloat 6s ease-in-out infinite !important;
}
.as-hero-sub {
  max-width: 560px;
}
.as-studio,
.as-card,
.as-step,
.as-faq-item,
.as-calc,
.as-bill-card,
[class^="as-"][class$="-card"] {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 0 #111 !important;
}
@media (max-width: 980px) {
  .as-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .as-hero-copy {
    max-width: none !important;
  }
  .as-hero-art.cm-logo3d img {
    width: min(220px, 60%) !important;
  }
}
.as-grid,
.as-steps,
.as-hero-stats {
  background: none !important;
  border: 0 !important;
  gap: 16px !important;
}
.as-cta-box {
  border: 3px solid #111 !important;
  border-radius: 24px !important;
  box-shadow: 6px 6px 0 #111 !important;
}
.trust-strip {
  background: none !important;
  border: 0 !important;
  gap: 14px !important;
}
@media (max-width: 700px) {
  .costa-ai-launcher {
    width: 46px !important;
    height: 46px !important;
    bottom: 14px !important;
    opacity: 0.95;
  }
}
.cta-sec p {
  color: #fff !important;
  opacity: 0.95;
}
footer p,
footer li,
footer a:not(.icon-btn),
footer span:not(.brand-word) {
  color: #d9d4cc !important;
}
footer h4,
footer h5,
footer .foot-col h3 {
  color: var(--red) !important;
}
footer .icon-btn {
  width: 42px !important;
  height: 42px !important;
  display: inline-grid !important;
  place-items: center;
  background: #fff !important;
  border: 3px solid #111 !important;
  box-shadow: 3px 3px 0 var(--red) !important;
}
footer .icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  color: #111;
  stroke: #111;
}
.hl {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ai-hero .eyebrow + .eyebrow,
.aa-hero .eyebrow + .eyebrow {
  display: none !important;
}
#ai-agent .aa-head .aa-kicker {
  display: none !important;
}
#ai-agent .aa-head h1 {
  line-height: 1.7 !important;
}
footer .icon-btn img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  flex: none;
}
html[lang="ar"] h1.h-display,
html[lang="ar"] h2.h-display {
  line-height: 1.7 !important;
}
.marquee-wrap {
  direction: ltr;
}
.marquee-track {
  direction: ltr;
}
.marquee-item {
  direction: rtl;
}

/* ===== PROCESS STEPS, BRAND WORDMARK, BUTTONS ===== */
.process {
  gap: 22px !important;
  align-items: stretch;
}
.step {
  padding: 22px 22px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.step::before {
  font: 400 54px/1 var(--cm-disp) !important;
  color: var(--red) !important;
  -webkit-text-stroke: 0;
  margin: 0 0 6px !important;
  opacity: 1;
}
.step-line {
  display: none !important;
}
.step h3 {
  margin: 0 !important;
  line-height: 1.5;
}
.step p {
  margin: 0;
  line-height: 1.7;
  color: #4a4640 !important;
}
.brand {
  gap: 10px !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-word,
html[lang="ar"] .brand-word {
  font:
    400 30px/1 "Bebas Neue",
    sans-serif !important;
  letter-spacing: 0.05em !important;
  color: #111 !important;
  white-space: nowrap;
}
.brand-word b {
  color: var(--red) !important;
  font-weight: 400 !important;
}
.foot-brand .brand-word {
  color: #fff !important;
}
.btn {
  justify-content: center !important;
  text-align: center;
}
.btn img[src*="whatsapp-icon-white"] {
  display: none !important;
}
.btn-primary img[src*="whatsapp-icon-white"] {
  display: inline-block !important;
}
.hero .btn-primary,
.cta-sec .btn-primary {
  background: #fff !important;
  color: #111 !important;
}
.hero .btn-primary img[src*="whatsapp-icon-white"],
.cta-sec .btn-primary img[src*="whatsapp-icon-white"] {
  filter: invert(1);
}
.hero .btn-outline {
  background: #111 !important;
  color: #fff !important;
}
@media (max-width: 980px) {
  .process {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 560px) {
  .process {
    grid-template-columns: 1fr !important;
  }
  .brand-word,
  html[lang="ar"] .brand-word {
    font-size: 24px !important;
  }
}
html.cm-top .costa-ai-launcher {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.6) !important;
}
.costa-ai-launcher {
  transition:
    opacity 0.25s,
    transform 0.25s;
}

/* ===== PILLS WITHOUT OFFSET SHADOWS, LOGO SPINS ON HOVER ===== */
.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.about-note-cta,
.aa-cta-btn,
.filter-btn,
.icon-btn,
.lang-btn,
.eyebrow,
.aa-kicker,
.aa-badge,
.cm-sticker,
.hero-tag,
.founder-tool,
.founder-skill-lvl,
.price-badge,
.costa-ai-launcher,
.showcase-sound-btn,
.cs-chip,
.nav-ai-agent,
[class*="badge"],
[class*="pill"],
[class*="chip"],
[class*="tag"]:not(html):not(body) {
  box-shadow: none !important;
}
.btn,
.btn-primary,
.btn-outline,
.about-note-cta,
.aa-cta-btn,
.filter-btn {
  border-radius: 999px !important;
  transition:
    transform 0.18s,
    background 0.18s,
    color 0.18s !important;
}
.btn:hover,
.about-note-cta:hover,
.aa-cta-btn:hover,
.icon-btn:hover,
.filter-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}
.btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: #111 !important;
  color: #fff !important;
}
.btn-outline:hover {
  background: var(--red) !important;
  color: #fff !important;
}
.hero .btn-outline {
  border-color: #111 !important;
}
.logo-mark,
.logo-mark.cm-spin,
.cs-brand img {
  animation: none !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform: none;
}
.brand:hover .logo-mark,
.cs-brand:hover img {
  transform: perspective(300px) rotateY(360deg) !important;
}

/* ===== 3D LOGO: red extrusion + ground shadow ===== */
.cm-logo3d img,
.as-hero-art.cm-logo3d img {
  filter: drop-shadow(1px 1px 0 #b3100f) drop-shadow(1px 1px 0 #b3100f) drop-shadow(1px 1px 0 #9c0d0c) drop-shadow(1px 1px 0 #9c0d0c)
    drop-shadow(1px 1px 0 #860a0a) !important;
  animation: cmfloat 6s ease-in-out infinite !important;
}
.cm-logo3d::after {
  bottom: 2% !important;
  width: 44% !important;
  height: 16px !important;
  background: radial-gradient(closest-side, rgba(17, 17, 17, 0.28), transparent) !important;
  filter: none !important;
  animation: cmground 6s ease-in-out infinite;
}
@keyframes cmground {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(0.72);
    opacity: 0.55;
  }
}
.as-hero-art.cm-logo3d {
  padding-bottom: 34px;
}
@media (prefers-reduced-motion: reduce) {
  .cm-logo3d::after {
    animation: none;
  }
}
.founder-id {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 20px !important;
  box-shadow: 5px 5px 0 #111 !important;
  margin-top: 16px;
}

/* ===== NO HAIRLINES, NO GAP-GRIDS, FOOTER BRAND ===== */
section,
.sec-alt,
.stats-bar,
.foot-top,
header,
footer {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
#siteHeader {
  border-bottom: 3px solid #111 !important;
}
.compare-grid {
  background: none !important;
  border: 0 !important;
  gap: 22px !important;
}
.compare-col {
  border-radius: 22px !important;
}
.compare-col.bad {
  background: #fff !important;
  color: #111 !important;
}
.compare-col.good {
  background: #111 !important;
  color: #fff !important;
}
.showcase-hero {
  padding-bottom: 110px !important;
}
.showcase-video-block {
  box-shadow: 8px 8px 0 #111 !important;
}
footer .brand-word {
  color: #fff !important;
}
footer .brand-word b {
  color: var(--red) !important;
}
footer .icon-btn,
.testi-av,
.icon-chat,
img.icon-chat {
  box-shadow: none !important;
}
footer .icon-btn {
  border: 2px solid #fff !important;
}
.testi-author {
  border-top: 2px dashed rgba(17, 17, 17, 0.2) !important;
}
.as-tag,
.aa-aud-item,
.as-meta,
.as-out-rows,
.as-calc-out,
.brief-chip,
.bsec,
.btile,
.brief-actions,
.cs-meta,
.brief-progress {
  border-color: #111 !important;
}
.as-tag,
.brief-chip {
  border-width: 2px !important;
  border-radius: 999px !important;
}
.btile,
.aa-aud-item {
  border: 2px solid #111 !important;
  border-radius: 16px !important;
}
.bsec {
  border: 3px solid #111 !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 #111 !important;
}
.as-meta,
.as-out-rows,
.brief-actions,
.cs-meta {
  border-top: 2px dashed rgba(17, 17, 17, 0.2) !important;
  border-bottom: 0 !important;
}
.as-calc-out {
  border-right: 0 !important;
  border-left: 0 !important;
}

/* ===== CURSOR: dot + trailing ring ===== */
html.cm-cursor,
html.cm-cursor * {
  cursor: none !important;
}
html.cm-cursor input,
html.cm-cursor textarea,
html.cm-cursor [contenteditable="true"] {
  cursor: text !important;
}
.cm-cur-dot,
.cm-cur-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.cm-cur-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #e21b1b;
}
.cm-cur-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid #111;
  box-sizing: border-box;
}
.cm-cur-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s,
    border-color 0.2s;
}
html.cm-cur-on .cm-cur-dot,
html.cm-cur-on .cm-cur-ring {
  opacity: 1;
}
.cm-cur-ring {
  transition:
    opacity 0.2s,
    width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s,
    border-color 0.2s;
}
html.cm-cur-hot .cm-cur-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: #e21b1b;
  background: rgba(226, 27, 27, 0.12);
}
html.cm-cur-hot .cm-cur-dot {
  background: #111;
}
html.cm-cur-down .cm-cur-ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
html.cm-cur-text .cm-cur-dot,
html.cm-cur-text .cm-cur-ring {
  opacity: 0 !important;
}
.as-seg button {
  border-top: 0 !important;
}
.brief-actions {
  border: 0 !important;
}
.brief-progress {
  border-bottom: 0 !important;
}
html[lang] footer .brand-word,
html footer .brand-word {
  color: #fff !important;
}
.showcase-video-block {
  width: min(1200px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  border-radius: 22px !important;
}
@media (max-width: 600px) {
  .showcase-video-block {
    width: calc(100% - 28px) !important;
    box-shadow: 5px 5px 0 #111 !important;
  }
}
/* studio.html hero: text + 3D logo on a white disc */
.st-logo {
  min-height: 420px;
}
.st-logo::before {
  content: "";
  position: absolute;
  width: min(420px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #111;
  box-shadow: 10px 10px 0 #111;
}
.st-logo img {
  position: relative;
  width: min(260px, 58%) !important;
}
.st-logo::after {
  display: none !important;
}
@media (max-width: 980px) {
  .st-logo {
    min-height: 300px;
    order: -1;
  }
  .st-logo::before {
    width: min(290px, 80%);
  }
  .st-logo img {
    width: min(180px, 50%) !important;
  }
}

/* ===== FOUNDER CARD: character pops out, 3D tilt ===== */
.founder-photo {
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 90px;
  perspective: 900px;
  isolation: isolate;
}
.founder-photo::before {
  inset: 0 !important;
  z-index: -1;
  border: 3px solid #111;
  border-radius: var(--cm-r);
  box-shadow: var(--cm-sh-lg);
  background:
    radial-gradient(rgba(255, 255, 255, 0.22) 2px, transparent 2.4px) 0 0/20px 20px,
    var(--red) !important;
}
.founder-photo img {
  position: absolute !important;
  left: 50%;
  bottom: 0;
  width: 104% !important;
  height: 124% !important;
  max-height: none !important;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transform-origin: 50% 100%;
  filter: drop-shadow(8px 12px 0 rgba(17, 17, 17, 0.28)) !important;
  animation: cmpop 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes cmpop {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@media (max-width: 980px) {
  .founder-photo {
    margin-top: 70px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .founder-photo img {
    animation: none;
  }
}

/* ===== AI STUDIO CALCULATOR, ARABIC TYPE SPACING ===== */
.as-calc {
  overflow: hidden !important;
  border-radius: 24px !important;
  padding: 0 !important;
}
.as-calc-out {
  background: #fbd5d2 !important;
  border: 0 !important;
  border-inline-end: 3px solid #111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.as-calc-controls {
  padding: 32px !important;
}
.as-seg {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.as-seg button {
  flex: 1 1 90px;
  border: 2px solid #111 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111 !important;
  padding: 10px 14px !important;
  font:
    900 16px "Cairo",
    sans-serif !important;
  box-shadow: none !important;
}
.as-seg button.on {
  background: var(--red) !important;
  color: #fff !important;
}
.as-select,
.as-calc select {
  border: 2px solid #111 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #111 !important;
  font:
    700 16px "Cairo",
    sans-serif !important;
  padding: 12px 16px !important;
}
.as-range-val {
  border: 2px solid #111 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--red) !important;
  font:
    900 16px "Cairo",
    sans-serif !important;
  letter-spacing: 0 !important;
  padding: 6px 16px !important;
  white-space: nowrap;
}
html[lang="ar"] body *:not(.brand-word):not(.brand-word *) {
  letter-spacing: 0 !important;
}
.step p {
  color: #1d1b18 !important;
}
:root {
  --ink-dim: #2b2824 !important;
}
.founder-photo img {
  width: auto !important;
  height: 122% !important;
  max-width: none !important;
}
.founder-photo img {
  height: 112% !important;
}

/* ===== FOUNDER FRAME SIZING ===== */
.founder-photo {
  aspect-ratio: 1/1 !important;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  margin-top: 110px !important;
}
.founder-photo img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
@media (max-width: 980px) {
  .founder-photo {
    max-width: 340px;
    margin-top: 80px !important;
  }
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
  z-index: 290 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  justify-items: stretch;
  gap: 12px !important;
  padding: 96px 18px 32px !important;
  overflow-y: auto;
  background:
    radial-gradient(rgba(17, 17, 17, 0.09) 1.4px, transparent 1.6px) 0 0/18px 18px,
    #f4f1ec !important;
}
.mobile-menu a,
html[lang] .mobile-menu a {
  font:
    900 17px/1.3 "Cairo",
    sans-serif !important;
  color: #111 !important;
  background: #fff;
  border: 3px solid #111;
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 4px 4px 0 #111;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.mobile-menu a:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #111;
}
.mobile-menu a.nav-ai-agent {
  background: #111 !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mobile-menu a.nav-ai-agent .nav-badge-new {
  background: var(--red);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
}
.mobile-menu #mobileCta {
  grid-column: 1/-1;
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 19px !important;
  padding: 16px !important;
  margin-top: 6px;
}
.mobile-menu.open a {
  animation: cmMenuIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mobile-menu.open a:nth-child(2) {
  animation-delay: 0.03s;
}
.mobile-menu.open a:nth-child(3) {
  animation-delay: 0.06s;
}
.mobile-menu.open a:nth-child(4) {
  animation-delay: 0.09s;
}
.mobile-menu.open a:nth-child(5) {
  animation-delay: 0.12s;
}
.mobile-menu.open a:nth-child(6) {
  animation-delay: 0.15s;
}
.mobile-menu.open a:nth-child(7) {
  animation-delay: 0.18s;
}
.mobile-menu.open a:nth-child(8) {
  animation-delay: 0.21s;
}
.mobile-menu.open a:nth-child(n + 9) {
  animation-delay: 0.24s;
}
@keyframes cmMenuIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.open a {
    animation: none;
  }
}
html[lang] .mobile-menu a.nav-ai-agent {
  color: #fff !important;
}
html[lang] .mobile-menu #mobileCta {
  color: #fff !important;
}
.mobile-menu {
  padding-top: 130px !important;
}
.mobile-menu #mobileCta {
  width: 100% !important;
  justify-self: stretch !important;
  margin-inline: 0 !important;
  max-width: none !important;
}
.burger {
  border: 2px solid #111 !important;
  background: #fff !important;
  border-radius: 50% !important;
}

/* ===== COMPACT HEADER + ROUND BURGER ===== */
#siteHeader {
  padding: 10px 0 !important;
}
#siteHeader > .wrap {
  min-height: 0 !important;
  height: auto !important;
  padding-block: 0 !important;
}
.nav-actions {
  gap: 8px !important;
  align-items: center;
}
.burger,
.nav-actions .icon-btn {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 3px solid #111 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
}
.burger span,
.burger span::before,
.burger span::after {
  width: 18px !important;
  height: 3px !important;
  border-radius: 3px;
  background: #111 !important;
}
.burger span::before {
  top: -6px !important;
}
.burger span::after {
  top: 6px !important;
}
@media (max-width: 980px) {
  #siteHeader {
    padding: 10px 0 !important;
  }
  .logo-mark {
    width: 38px !important;
    height: 38px !important;
  }
  .brand-word,
  html[lang="ar"] .brand-word {
    font-size: 24px !important;
  }
  .mobile-menu {
    padding-top: 88px !important;
  }
}
.burger.on span {
  background: transparent !important;
}
.burger.on span::before,
.burger.on span::after {
  top: 0 !important;
}
.burger.on span::before {
  transform: rotate(45deg) !important;
}
.burger.on span::after {
  transform: rotate(-45deg) !important;
}
.burger.on {
  border-color: var(--red) !important;
}

/* ===== INTRO: red logo on white, progress + counter, sheet slides up ===== */
.intro-splash {
  background: #fff !important;
  display: grid !important;
  place-items: center;
  cursor: default;
  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1) !important;
  opacity: 1 !important;
}
.intro-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(17, 17, 17, 0.07) 1.4px, transparent 1.6px) 0 0/18px 18px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 75%);
}
.intro-glow,
.intro-rings {
  display: none !important;
}
.intro-stack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(78vw, 340px);
}
.intro-splash .intro-logo {
  width: min(46vw, 170px) !important;
  height: auto;
  filter: drop-shadow(5px 7px 0 rgba(17, 17, 17, 0.14)) !important;
  animation:
    introIn 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both,
    introSpin 2.6s ease-in-out 0.9s infinite !important;
}
@keyframes introIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes introSpin {
  0%,
  100% {
    transform: perspective(500px) rotateY(-14deg);
  }
  50% {
    transform: perspective(500px) rotateY(14deg);
  }
}
.intro-name {
  font:
    400 clamp(26px, 5vw, 34px)/1 "Bebas Neue",
    sans-serif;
  letter-spacing: 0.14em;
  color: #111;
  opacity: 0;
  animation: introIn 0.8s 0.25s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.intro-name b {
  color: var(--red);
  font-weight: 400;
}
.intro-bar {
  width: 100%;
  height: 3px;
  background: rgba(17, 17, 17, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.intro-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  border-radius: 3px;
}
.intro-n {
  font:
    700 12px "Space Mono",
    monospace;
  color: #111;
  letter-spacing: 0.2em;
}
.intro-splash.is-hiding {
  transform: translateY(-100%);
  pointer-events: none;
}
.intro-splash.is-hiding .intro-logo {
  animation: none !important;
}
.intro-splash.is-hidden {
  display: none !important;
}
/* hero reveals after the sheet leaves */
html.intro-done .hero .eyebrow,
html.intro-done .hero .h-display,
html.intro-done .hero .hero-hook,
html.intro-done .hero .hero-btns {
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.intro-done .hero .h-display {
  animation-delay: 0.12s;
}
html.intro-done .hero .hero-hook {
  animation-delay: 0.24s;
}
html.intro-done .hero .hero-btns {
  animation-delay: 0.36s;
}
html.intro-done .cm-art {
  animation: heroPop 1.1s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroPop {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-splash,
  .intro-splash .intro-logo,
  .intro-name {
    animation: none !important;
    transition: none !important;
  }
  html.intro-done .hero * {
    animation: none !important;
  }
}
.intro-splash .intro-logo {
  width: min(46vw, 210px) !important;
}
.intro-stack {
  width: min(78vw, 380px);
}

/* ===== TYPOGRAPHY, ABOUT LOGO BLOCK, ICON TILES ===== */
body,
button,
input,
textarea,
select {
  font-family: "Cairo", "DM Sans", system-ui, sans-serif;
}
body {
  font-weight: 600;
  color: #1a1815;
  -webkit-font-smoothing: antialiased;
}
p,
li,
td,
dd,
label,
figcaption,
blockquote,
.sec-sub,
.svc-desc,
.why-desc,
.price-note,
.testi-text,
.ai-feat p,
.step p,
.about-text p {
  color: #1a1815 !important;
  font-weight: 600;
  line-height: 1.85;
}
html:not([lang="ar"]) p,
html:not([lang="ar"]) li {
  font-size: 1.02em;
  letter-spacing: 0;
}
small,
.small,
.hint,
.meta,
.note,
[class*="-sub"],
[class*="-desc"],
[class*="-lbl"] {
  color: #2b2824 !important;
  font-weight: 700;
}
.mono,
[class*="mono"],
.eyebrow,
.kicker,
[class*="kicker"],
.tag,
.label,
[class*="-tag"] {
  font-family: "Space Mono", "Cairo", monospace;
  font-weight: 700;
  color: #111;
}
html[lang="ar"] .mono,
html[lang="ar"] [class*="mono"] {
  font-family: "Cairo", sans-serif;
  letter-spacing: 0;
}
footer p,
footer li,
footer a:not(.icon-btn) {
  font-weight: 600;
}
.hero p,
.hero .hero-hook,
.cta-sec p,
.founder-tool {
  color: inherit !important;
}
.cta-sec p {
  color: #fff !important;
}
.hero .hero-hook {
  color: #fff !important;
}
.price-card.pop p,
.price-card.pop li,
.price-card.pop small {
  color: #fff !important;
}
.compare-col.good p,
.compare-col.good li {
  color: #fff !important;
}

/* about section: 3D logo + tagline instead of the old picture */
.about-logo {
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 24px !important;
  box-shadow: 6px 6px 0 #111 !important;
  min-height: 380px;
  padding: 34px 20px 28px;
  align-content: center;
  gap: 10px;
  overflow: hidden;
}
.about-logo::after {
  display: none !important;
}
.about-logo img.logo-real {
  width: min(230px, 58%) !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(1px 1px 0 #b3100f) drop-shadow(1px 1px 0 #b3100f) drop-shadow(1px 1px 0 #9c0d0c) drop-shadow(1px 1px 0 #860a0a) !important;
}
.about-tag {
  font:
    400 clamp(24px, 3.2vw, 34px)/1 "Bebas Neue",
    sans-serif;
  letter-spacing: 0.12em;
  color: #111;
  margin-top: 10px;
}
.about-tag i {
  font-style: normal;
  color: var(--red);
}
.about-tag-sub {
  font:
    700 13px "Space Mono",
    monospace;
  letter-spacing: 0.34em;
  color: #fff;
  background: #111;
  border-radius: 999px;
  padding: 5px 16px;
}

/* icon tiles everywhere: red tile, white glyph, comic outline */
.as-card-icon,
.ai-feat-icon,
.aa-svc-icon,
.svc-icon,
.why-icon,
.cs-icon {
  display: grid !important;
  place-items: center;
  width: 46px !important;
  height: 46px !important;
  background: var(--red) !important;
  color: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  flex: none;
}
.as-card-icon svg,
.ai-feat-icon svg,
.aa-svc-icon svg,
.svc-icon svg,
.why-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: #fff !important;
  stroke: #fff !important;
}
.as-card-num {
  font:
    700 13px "Space Mono",
    monospace;
  color: #111 !important;
}
.about-tag-sub {
  color: #fff !important;
}

/* featured price card: every line white on red */
.price-card.pop :is(p, span, li, small, div, h3, h4):not(.price-badge) { color: #fff !important; }
.price-card.pop .price-badge { color: #fff !important; }

/* the 3D logo sits straight on the page: no box around it */
.about-logo { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0; padding: 0; overflow: visible; }
.about-logo img.logo-real { width: min(300px, 62%) !important; }
.about-logo .about-tag { margin-top: 18px; }
.aa-visual-wrap.about-logo { max-width: 460px; margin: 10px auto 0; }

/* ===== CALM PASS: one idea per block, nothing said twice ===== */
/* hero keeps only: logo, headline, one line, two buttons */
.hero .stats-bar,
.cm-sticker,
.cm-star,
.cm-disc .ring { display: none !important; }
.hero { padding-bottom: 96px !important; }
/* strips that repeat what the sections below already say */
.marquee-wrap,
.wrap:has(> .trust-strip):not(:has(.sec-title)) { display: none !important; }
/* about: the standalone-services pill list repeats the services section */
.about-note-avail,
.about-note-chips { display: none !important; }
/* founder: skills keep title + level, tool chips are noise */
.founder-tools { display: none !important; }
/* services: three bullets per card is enough */
.svc-card li:nth-child(n + 4) { display: none; }
/* AI section: the logo already appears in the hero and the about block */
.ai-visual { display: none !important; }
.ai-wrap { grid-template-columns: 1fr !important; }
/* section titles: the accent words sit in a black box, same as the hero (white text on #111) */
.sec-title .hl { background: #111 !important; color: #fff !important; padding: 0 0.14em !important; box-shadow: none !important; border-radius: 8px; }

/* AI Studio hero: the numbers repeat the studio grid right below */
.as-hero-stats { display: none !important; }
.as-hero { padding-bottom: 70px !important; }

.aa-visual-wrap.about-logo { margin-bottom: 44px; }


/* ===== AI AGENT PAGE (same blocks as the home page) ===== */
.price-setup {
  display: inline-block;
  font: 900 14px "Cairo", sans-serif;
  color: #111 !important;
  background: #fbd5d2;
  border: 2px solid #111;
  border-radius: 999px;
  padding: 3px 14px;
  margin: 4px 0 10px;
}
.price-card.pop .price-setup { background: #fff; color: #111 !important; }
.price-foot { text-align: center; margin-top: 32px; font-weight: 700; color: #1a1815; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.faq-card { align-items: flex-start !important; text-align: start !important; padding: 22px !important; }
.faq-card b { font-size: 17px; margin-bottom: 6px; }
@media (max-width: 700px) { .faq-grid { grid-template-columns: 1fr; } }
.price-card.pop div.price-setup { color: #111 !important; background: #fff; }

.price-card.pop .price-setup, .price-card.pop .price-setup * { color: #111 !important; -webkit-text-fill-color: #111 !important; }


/* ===== FOUNDER: the character stands on the page itself, no frame behind it ===== */
.founder-photo { aspect-ratio: auto !important; max-width: none !important; margin: 0 auto !important; display: grid; place-items: center; perspective: 900px; }
.founder-photo::before { display: none !important; }
.founder-photo img {
  position: relative !important; left: auto !important; bottom: auto !important;
  width: min(440px, 100%) !important; height: auto !important; max-height: none !important;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) !important; transform-origin: 50% 80%;
  filter: drop-shadow(6px 10px 0 rgba(17, 17, 17, 0.16)) !important;
}

/* ===== WORKS PAGE: projects + live demos + own product (same blocks as the founder's portfolio) ===== */
.wk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.wk-grid--demos { grid-template-columns: repeat(4, 1fr); }
.wk-card {
  position: relative; display: flex; flex-direction: column; background: #fff; color: #111;
  border: 3px solid #111; border-radius: 22px; box-shadow: 5px 5px 0 #111;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wk-card:hover { transform: translateY(-5px) rotate(-0.4deg); }
.wk-shot { position: relative; aspect-ratio: 1100 / 760; background: #fbd5d2; border-bottom: 3px solid #111; border-radius: 18px 18px 0 0; }
.wk-shot > img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px 18px 0 0; display: block; }
.wk-mark {
  position: absolute; inset-inline-end: 12px; bottom: -22px; width: 50px; height: 50px; border-radius: 50%;
  background: #fff; border: 3px solid #111; display: grid; place-items: center; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.wk-mark img { width: 28px; height: auto; }
.wk-card:hover .wk-mark { transform: translateY(-8px) rotate(-12deg); }
.wk-meta { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.wk-meta small { font: 800 12.5px "Cairo", sans-serif; color: #2b2824; }
.wk-no { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--red); color: #fff; border: 2px solid #111; font: 700 12px "Space Mono", monospace; }
.wk-card h3 { font: 400 26px/1.1 "Bebas Neue", sans-serif; letter-spacing: 0.03em; padding: 6px 18px 0; color: #111; }
html[lang="ar"] .wk-card h3 { font-family: "Bebas Neue", "Cairo", sans-serif; }
.wk-card p { padding: 8px 18px 0; font-size: 14.5px; line-height: 1.75; color: #1a1815; font-weight: 600; flex: 1; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.wk-chips span { border: 2px solid #111; border-radius: 999px; padding: 2px 11px; font: 800 12px "Cairo", sans-serif; background: #fff; color: #111; }
.wk-go { padding: 14px 18px 18px; font: 900 14px "Cairo", sans-serif; color: var(--red); }
.wk-demo-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 0; }
.wk-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--red); color: #fff; border: 3px solid #111; }
.wk-ic svg { width: 22px; height: 22px; }
.wk-demo .wk-meta { padding-top: 12px; }
.wk-product { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.wk-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.wk-ticks li { position: relative; padding-inline-start: 30px; font-weight: 800; color: #111; }
.wk-ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--red); color: #fff; border: 2px solid #111; border-radius: 50%; font-size: 12px; }
.wk-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.wk-product-logo img.logo-real { width: min(300px, 70%) !important; }
@media (max-width: 1100px) { .wk-grid, .wk-grid--demos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .wk-product { grid-template-columns: 1fr; } .wk-product-logo { order: -1; } }
@media (max-width: 600px) { .wk-grid, .wk-grid--demos { grid-template-columns: 1fr; } }

/* ---- section headings: tag, title and intro all start-aligned (they were mixed: tag at the start, title and intro centred) ---- */
.sec-head .sec-tag,
.sec-head .sec-title,
.sec-head .sec-sub { text-align: start !important; }
.sec-head .sec-title { margin: 0 !important; }
.sec-head .sec-sub { margin: 0 !important; max-width: 680px; }

/* ---- explainer video player (same behaviour and look as the CST SKILLS player) ---- */
.cs-vidbox{position:relative;aspect-ratio:16/9;max-width:1080px;margin:28px auto 0;border:4px solid #111;border-radius:24px;box-shadow:10px 10px 0 #111;overflow:hidden;background:#e21b1b}
.cs-vidbox video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#111;cursor:pointer}
.cs-vplay{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:#111;border:5px solid #fff;box-shadow:6px 6px 0 rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;transition:transform .2s,opacity .2s;z-index:2;padding:0}
.cs-vplay:hover{transform:scale(1.08)}
.cs-vplay:focus-visible{outline:4px solid #fff;outline-offset:4px}
.cs-vtri{width:0;height:0;border-style:solid;border-width:22px 0 22px 36px;border-color:transparent transparent transparent #fff;margin-left:8px}
.cs-vlen{position:absolute;bottom:16px;inset-inline-start:16px;background:#111;color:#fff;border:3px solid #fff;border-radius:999px;padding:2px 14px;font:700 15px 'Space Mono',monospace;z-index:2;direction:ltr}
.cs-vlen:empty{display:none}
.cs-vidbox.started .cs-vlen{display:none}
.cs-vidbox.playing .cs-vplay{opacity:0;pointer-events:none}
.cs-vidbox.playing:hover .cs-vplay{opacity:.9;pointer-events:auto}
.cs-vidbox.playing .cs-vtri{border:0;width:30px;height:38px;margin:0;background:linear-gradient(90deg,#fff 0 34%,transparent 34% 66%,#fff 66%)}
@media (hover:none){.cs-vidbox.playing:hover .cs-vplay{opacity:0;pointer-events:none}}
@media (max-width:720px){
  .cs-vidbox{border-width:3px;border-radius:18px;box-shadow:6px 6px 0 #111;margin-top:20px}
  .cs-vplay{width:76px;height:76px;margin:-38px 0 0 -38px;border-width:4px}
  .cs-vtri{border-width:15px 0 15px 25px;margin-left:6px}
  .cs-vlen{bottom:10px;inset-inline-start:10px;font-size:13px;padding:1px 10px}
}
@media (max-width:720px){.showcase-hero{padding-bottom:40px !important}}