@font-face { font-family: "Arboria"; src: url("../fonts/Arboria-Book.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arboria"; src: url("../fonts/Arboria-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ArbFONTS"; src: url("../fonts/Droid.ttf") format("truetype"); font-display: swap; }

:root {
  --bg: #1d1d1f;
  --bg-2: #252525;
  --line: #3a3a3c;
  --text: #e5e5e5;
  --muted: #a8a8a8;
  --white: #fff;
  --accent: #ff3e00;
  --green: #42b96e;
  --radius: 18px;
  --wrap: 1276px;
  --font: "Arboria", "ArbFONTS", system-ui, sans-serif;
}
html[lang="ar"] { --font: "ArbFONTS", "Arboria", system-ui, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000 radial-gradient(at 50% 100%, #484848 -120%, #000 100%) fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #ddd, transparent),
    radial-gradient(1.5px 1.5px at 60px 150px, #fff, transparent), radial-gradient(1px 1px at 170px 190px, #bbb, transparent);
  background-size: 211px 211px; opacity: .35; animation: twinkle 6s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1px 1px at 90px 40px, #fff, transparent), radial-gradient(1.5px 1.5px at 240px 260px, #ccc, transparent);
  background-size: 307px 307px; opacity: .25; animation: twinkle 9s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { to { opacity: .08; } }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--white); line-height: 1.35; font-weight: 700; }
p { margin: 0; }
.latin { font-family: "Arboria", system-ui, sans-serif; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.section { padding: 96px 0; }
.section + .section { padding-top: 24px; }
/* homepage: one rhythm, the same space above and below every section */
.home .section, .home .section + .section { padding: 72px 0; }

/* section heading: small orange label, then the title */
.kicker {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--accent); font-size: 15px;
}
.kicker::before, .kicker::after { content: ""; width: 28px; height: 1px; background: var(--accent); }
.kicker.start { justify-content: flex-start; }
.kicker.start::after { display: none; }
.title { font-size: clamp(26px, 3.4vw, 38px); text-align: center; margin-top: 6px; }
.title.start { text-align: start; }
.head { margin-bottom: 48px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: var(--white); font-weight: 700; font-size: 15px;
  border: 0; cursor: pointer; transition: filter .2s;
}
.btn:hover { filter: brightness(1.12); }
/* Buttons: the academy's own two, as on the old site (pt-button and pt-button-outline), nothing else.
   .btn        orange fill: buying ("شراء", "اشتري الآن", the arrow ↗ with .go)
   .btn.ghost  outline: everything else ("محتوى الكورس", "الأسعار والباقات", WhatsApp, English); the edge turns orange on hover.
   The floating WhatsApp button stays its own small green circle. */
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); filter: none; }
.btn.big { height: 54px; padding: 0 34px; font-size: 17px; }

/* header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.site-header.solid { background: rgba(20, 20, 22, .92); backdrop-filter: blur(10px); border-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
/* the logo sits in the page (not as an image) so its orange dot can pulse, as on the old site */
.brand .logo { display: block; height: 54px; width: auto; }
.logo .lg-w { fill: #fff; }
.logo .lg-o { fill: var(--accent); }
.logo .lg-dot { animation: rec 1.5s cubic-bezier(.445, 0, .55, .95) infinite; }
@keyframes rec { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .logo .lg-dot { animation: none; } }
.nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.nav .btn { margin-inline-end: clamp(20px, 10vw, 150px); }
.nav a, .nav-drop-btn { white-space: nowrap; }
/* narrower windows, before the phone menu takes over: one line, the space closing little by little; from 1240px up it meets the rules above exactly */
@media (min-width: 901px) and (max-width: 1239px) {
  .site-header .wrap { gap: 16px; }
  .nav .btn { margin-inline-end: min(calc(100vw - 1092px), 10vw); }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .brand .logo { height: 44px; }
  .nav { gap: calc(8px + (100vw - 901px) * .11); font-size: 14px; }
  .nav .btn { margin-inline-end: calc(10px + (100vw - 901px) * .2); }
}
.brand { order: 2; margin-inline-start: auto; }
.nav a:hover, .nav a.on { color: var(--accent); }
.nav .nav-ai { font-family: "Arboria", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .02em; }   /* AI stands out a little, same colour as the menu */
/* the menu's AI: an orange shimmer passing through the word and a small spark breathing at its corner; nothing that takes room, so the menu does not move */
.nav .nav-ai { position: relative; }
.nav .nav-ai .latin { background: linear-gradient(100deg, #fff 0%, #fff 38%, #ff3e00 48%, #ffb48f 52%, #fff 62%, #fff 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nav-ai-sheen 3.2s linear infinite; }
.nav .nav-ai:hover .latin, .nav .nav-ai.on .latin { background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #ffb48f 50%, var(--accent) 62%, var(--accent) 100%); }
.nav .nav-ai::after { content: ""; position: absolute; top: -3px; inset-inline-end: -9px; width: 8px; height: 8px; background: #ff3e00; filter: drop-shadow(0 0 3px rgba(255,62,0,.8));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: ai-twinkle 2.4s ease-in-out infinite; }
@keyframes nav-ai-sheen { to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .nav .nav-ai .latin, .nav .nav-ai::after { animation: none; } }
.nav .lang { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.nav a.lang { color: var(--white); }
/* "محتوى الكورسات": a chooser for the three courses */
.nav-drop { position: relative; }
.nav-drop-btn { display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.nav-drop-btn::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-drop.open .nav-drop-btn::after { transform: translateY(1px) rotate(-135deg); }
.nav-drop-btn:hover, .nav-drop-btn.on { color: var(--accent); }
.nav-menu { display: none; position: absolute; top: calc(100% + 16px); inset-inline-start: -18px; min-width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(20, 20, 22, .97); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.nav-drop.open .nav-menu { display: grid; }
.nav-menu a { padding: 10px 14px; border-radius: 10px; white-space: nowrap; }
.nav-menu a:hover { background: rgba(255,255,255,.06); }
.menu-btn { display: none; margin-inline-start: auto; background: none; border: 0; color: var(--white); cursor: pointer; padding: 8px; }
.menu-btn svg { width: 26px; height: 26px; }

/* hero */
.hero { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; padding: clamp(72px, 9vh, 100px) 0 40px; background: #0b0b0c; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)), linear-gradient(transparent 75%, #000); }
.hero .wrap { position: relative; z-index: 1; }
.hero-head { text-align: center; margin-bottom: clamp(22px, 3.6vh, 44px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.6vh, 30px); justify-items: center; }
/* the card first, wide and centred; the course text under it */
.hero-side { order: -1; width: min(100%, 920px); }
.hero-text { text-align: center; max-width: 1240px; }
.hero-text .hero-cta { justify-content: center; }
.hero-course { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; margin: 0; }
.hero h1 { font-family: "Arboria", sans-serif; font-size: clamp(36px, min(6vw, 7.5vh), 84px); letter-spacing: .5px; line-height: 1.08; }
.u { position: relative; display: inline-block; }
.u > img:first-of-type { position: absolute; left: 0; right: 0; bottom: -.18em; width: 100%; height: auto; }
.hero-bar { position: relative; width: fit-content; margin: clamp(14px, 2vh, 22px) auto 0; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; }   /* information, not a button */
.hero-bar .ctx { color: var(--white); }   /* the academy's colours, not Contrix's green */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(14px, 2.2vh, 26px); }
.hero-card { position: relative; border: 1px solid rgba(255,255,255,.09); border-radius: 28px; padding: clamp(16px, 2.6vh, 30px) clamp(18px, 2.2vw, 36px) clamp(8px, 1.4vh, 18px); background: linear-gradient(160deg, rgba(40,40,44,.72), rgba(14,14,16,.82)); backdrop-filter: blur(8px); box-shadow: 0 40px 80px rgba(0,0,0,.45); overflow: hidden; }
.hero-card::before { content: ""; position: absolute; inset: auto 10% -40% 10%; height: 70%; background: radial-gradient(closest-side, rgba(255,62,0,.18), transparent); pointer-events: none; }
/* the three courses beside Contrix: the boxes about 60% of the row, Contrix 40%, the "+" evenly spaced between */
/* the card in three parts: the boxes as one block, Contrix balancing it at the far side, the "+" exactly between */
.hero-stage { --cw: clamp(104px, min(11vw, 16vh), 190px); display: grid; grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto; align-items: center; padding: 0 clamp(8px, 3vw, 44px) calc(var(--cw) * .16); }
.hero-stage > :nth-child(1) { grid-column: 1; }
.hero-stage > :nth-child(2) { grid-column: 3; }
.hero-stage > :nth-child(3) { grid-column: 5; }
.hs-group { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 1.4vw, 22px); perspective: 1200px; }
.hs { position: relative; display: block; }
.hs::before { content: ""; position: absolute; inset: 15% -30% -5%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .45; filter: blur(26px); z-index: -1; transition: opacity .4s; }
.hs img { display: block; width: calc(var(--cw) * .71); filter: drop-shadow(0 24px 28px rgba(0,0,0,.7));
  -webkit-box-reflect: below 2px linear-gradient(transparent 78%, rgba(255,255,255,.18)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hs.c img { width: var(--cw); animation: float 6s ease-in-out infinite; }
.hs.l img { transform: rotateY(16deg); }
.hs.r img { transform: rotateY(-16deg); }
.hs:hover img { transform: translateY(-8px) rotateY(0); }
.hs:hover::before { opacity: .75; }
/* course picker: the chosen box in the middle, the info under the card follows it */
.hs-col { display: grid; justify-items: center; }
.hs-dots { display: flex; align-items: center; margin-top: calc(var(--cw) * .22); }
.hs-dots button { width: 22px; height: 22px; padding: 0; border: 8px solid transparent; background: rgba(255,255,255,.3) content-box; border-radius: 999px; cursor: pointer; transition: width .3s, background-color .3s; }
.hs-dots button[aria-current="true"] { width: 34px; background-color: var(--accent); }
.hs-group[data-picker] { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hs.c::before { opacity: .7; }
/* the three course texts share one cell, so switching never moves the page */
.hero-text { display: grid; }
.hero-info { grid-area: 1 / 1; animation: rise .45s ease both; }
.hero-info[hidden] { display: block; visibility: hidden; }
.hero-desc { color: var(--white); font-size: clamp(16px, 1.25vw, 18px); margin: 2px 0 0; line-height: 1.6; }
.hero-deal { font-size: clamp(14px, 1.05vw, 16px); color: var(--muted); margin: 4px 0 0; line-height: 1.6; }
.hero-deal b { color: var(--text); }
@keyframes rise { from { transform: translateY(10px); } }   /* no fade: a paused animation must not leave text invisible */
.hero-stage .pack-plus { font-size: clamp(34px, 3.6vw, 60px); }
.hero-stage .pack-contrix { gap: 16px; font-size: clamp(16px, 1.5vw, 24px); }
/* the label hangs under the mark, so the mark itself lines up with the middle of the boxes */
.hero-stage .pack-contrix { position: relative; }
.hero-stage .pack-contrix > span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; display: grid; justify-items: center; }
.hero-stage .pack-contrix img { width: calc(var(--cw) * .74); height: calc(var(--cw) * .74); object-fit: contain; }   /* every mark in the same box, so marks, names and "+" share one line */
/* Ask Abdulrahman beside Contrix, the same size and spacing; its mark is wide, so it is set by width too */
.hero-stage .pack-aai img { width: calc(var(--cw) * 1.05); animation: none; }
/* AI page: each tool in its own section and its own look; the change of ground between them is the divide.
   Contrix: its app's green theme (deep black #050505 under a quiet aurora, vignette and grain; green #4cd676; white glass, big corners; Urbanist).
   Ask Abdulrahman: the A.AI page (#051117, glass panels with a soft inner light, #00D34A and #7AE2CF, Arboria). */
#contrix, #ask-abdulrahman { scroll-margin-top: 76px; }
.ai-top { padding-top: 130px !important; padding-bottom: 24px !important; }
.ai-sub { margin: 14px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: 18px; line-height: 1.8; }
.tool { position: relative; padding: 110px 0; }
.tool-row { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 64px; align-items: center; min-height: 440px; }
.tool-text { display: grid; justify-items: start; }
.tool-logo { height: 48px; width: auto; }
.tool-title { margin: 22px 0 6px; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.1; color: #fff; text-align: start; }
.tool-tag { margin: 0; font-size: 16px; }
.tool-lead { margin: 20px 0 8px; font-size: 18px; line-height: 1.8; }
.tool-meta { margin: 0 0 30px; font-size: 15px; }
.aai-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; }
.aai-link:hover { color: var(--accent); }

/* Contrix */
.tool-cx { overflow: hidden; isolation: isolate; }
/* its ground under the section, faded in at the top so the section starts out of the page's stars without an edge */
.tool-cx::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 40%, rgba(0,0,0,.38) 62%, rgba(0,0,0,.85) 100%),
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(38,84,120,.34) 0%, rgba(38,84,120,.18) 36%, rgba(38,84,120,.06) 56%, rgba(38,84,120,0) 72%),
    radial-gradient(ellipse 40% 40% at 72% 72%, rgba(74,52,120,.26) 0%, rgba(74,52,120,.14) 36%, rgba(74,52,120,.05) 56%, rgba(74,52,120,0) 72%),
    radial-gradient(ellipse 40% 40% at 18% 80%, rgba(36,96,80,.24) 0%, rgba(36,96,80,.13) 36%, rgba(36,96,80,.04) 56%, rgba(36,96,80,0) 72%),
    #050505;
  -webkit-mask-image: linear-gradient(transparent, #000 240px); mask-image: linear-gradient(transparent, #000 240px); }
.tool-cx::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(transparent, #000 240px); mask-image: linear-gradient(transparent, #000 240px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.tool-cx .tool-title { font-family: "Urbanist", sans-serif; font-weight: 800; letter-spacing: -.02em; }
.tool-cx .tool-tag { color: #4cd676; font-family: "Urbanist", sans-serif; font-weight: 600; letter-spacing: .02em; }
.tool-cx .tool-lead, .tool-cx .tool-meta, .cx-btn { font-family: "IBM Plex Sans Arabic", var(--font); }
.tool-cx .tool-lead { color: rgba(255,255,255,.62); }
.tool-cx .tool-meta { color: rgba(255,255,255,.45); }
/* the Contrix lockup over its canvas, as in its own header: the mark, then the name */
/* the Contrix mark, large, before its name in the title */
.cx-title { display: flex; align-items: center; gap: .32em; }
.cx-title-mark { width: 1.15em; height: 1.15em; object-fit: contain; filter: drop-shadow(0 0 18px rgba(76,214,118,.35)); }
.cx-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border: 1px solid rgba(76,214,118,.45); border-radius: 11px; background: rgba(76,214,118,.06); color: #4cd676; font-size: 16px; font-weight: 600; transition: box-shadow .2s, background .2s; }
.cx-btn .latin { font-family: "Urbanist", sans-serif; font-weight: 700; }
.cx-btn:hover { background: rgba(76,214,118,.10); box-shadow: 0 0 0 1px rgba(76,214,118,.40), 0 0 25px -4px rgba(76,214,118,.40); }
/* its canvas: the picture before, the green line sweeping the result in */
/* the stage keeps the tallest example's room, so the page doesn't move when the frame changes shape */
.cx-stage { aspect-ratio: 4 / 3; display: flex; align-items: center; }
.cx-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 23px; background: #101013; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 58px -14px rgba(0,0,0,.75); transition: opacity .32s cubic-bezier(.4,0,.2,1); }
.cx-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-frame.is-swap { opacity: 0; }
/* Video: the film plays over the result, filling the frame like the pictures */
.cx-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-film[hidden] { display: none; }
.cx-after { clip-path: inset(0 100% 0 0); }
.cx-frame.is-on .cx-after { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.4,0,.2,1); }
.cx-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #4cd676; box-shadow: 0 0 14px 2px rgba(76,214,118,.55); opacity: 0; }
.cx-frame.is-on .cx-sweep { left: 100%; transition: left 1.5s cubic-bezier(.4,0,.2,1), opacity .32s; }
.cx-frame.is-line .cx-sweep { opacity: 1; }
.cx-sweep-dot { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #4cd676; background: rgba(5,5,5,.65); }
.cx-sweep-dot::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #4cd676; }
.cx-tools { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
.cx-tools button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cx-tools button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background .2s, transform .2s; }
.cx-tools button:hover::before { background: rgba(255,255,255,.62); }
.cx-tools button.is-on::before { background: #4cd676; transform: scale(1.25); }

/* Ask Abdulrahman: centred words, then the trainer beside the chat in the A.AI glass panel.
   Its ground comes up out of Contrix's black, so the change of section is the change of colour, not a line. */
/* its ground: the A.AI page's dark teal with its soft light on the left, drawn as a gradient (the picture of it showed steps) under a fine grain,
   coming up out of Contrix's black and fading out at the bottom into the page; the homepage's stars rising through it */
.tool-aai { isolation: isolate; overflow: hidden; font-family: "Arboria", sans-serif; background:
    radial-gradient(ellipse 42% 60% at 0% 42%, rgba(46,140,150,.30) 0%, rgba(46,140,150,.16) 35%, rgba(46,140,150,.06) 60%, rgba(46,140,150,0) 80%),
    linear-gradient(#050505, #051117 220px, #051117 calc(100% - 280px), rgba(5,17,23,0)); }
.tool-aai::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.tool-aai .aai-stars { position: absolute; z-index: -1; }
/* the stars and the grain fade out with the ground, so the section ends without an edge */
.tool-aai .aai-stars, .tool-aai::after { -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent); mask-image: linear-gradient(#000 calc(100% - 300px), transparent); }
.tool-aai > .wrap { position: relative; }
.tool-aai .tool-row { grid-template-columns: minmax(0, 1fr); gap: 56px; min-height: 0; }
.tool-aai .tool-text { justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.tool-aai .tool-title { text-align: center; font-size: clamp(40px, 5vw, 68px); font-weight: 700; background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.62)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool-aai .tool-tag { color: #7AE2CF; }
.tool-aai .tool-lead { color: rgba(255,255,255,.78); }
.tool-aai .tool-meta { color: rgba(255,255,255,.6); }
.aai-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 28px; border: 1px solid rgba(255,255,255,.10); border-radius: 15px; background: rgba(5,17,23,.10); box-shadow: inset 0 0 28px rgba(255,255,255,.10); color: #fff; font-size: 16px; font-weight: 700; transition: color .3s, transform .3s; }
.aai-btn:hover { color: #00D34A; transform: translateY(-1px); }
/* the trainer and the chat straight on the section's ground, no panel round them */
.aai-scene { position: relative; display: flex; align-items: center; justify-content: center; width: min(1500px, 100%); margin: -40px auto 0; --h: clamp(480px, 54vw, 750px); height: var(--h); }   /* trial x1.5; before: width min(1000px,100%), height clamp(320px,36vw,500px), phone 260px (the phone keeps it: x1.5 overflows its width) */
.aai-scene .aai-trainer { height: 100%; width: auto; margin-right: calc(var(--h) * -.0208);   /* the 26px added on the right for the tablet's corner take no room */ filter: grayscale(1); position: relative; z-index: 1; -webkit-mask-image: linear-gradient(#000 48%, rgba(0,0,0,.55) 66%, transparent 86%); mask-image: linear-gradient(#000 48%, rgba(0,0,0,.55) 66%, transparent 86%); }
.aai-scene .aai-chat { align-self: flex-start; margin-top: 17%; height: 58%; width: auto; margin-left: -6%;   /* was 70%, -3%; top 11% */ position: relative; z-index: 0;   /* behind the trainer */ filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)) brightness(1.15); }
@media (max-width: 900px) {
  .tool { padding: 64px 0; }
  .tool-row { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; }
  .aai-scene { --h: 260px; }
  .aai-scene .aai-chat { height: 60%; margin-left: -6%; }
  .ai-top { padding-top: 104px !important; }
}
.hero-pack { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.6vw, 40px); }
.pack-box { width: clamp(100px, min(9vw, 19vh), 170px); filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); animation: float 6s ease-in-out infinite; }
.pack-plus { font-family: "Arboria", sans-serif; font-size: clamp(32px, 3.4vw, 54px); color: var(--accent); line-height: 1; }
.pack-contrix { display: grid; justify-items: center; gap: 12px; white-space: nowrap; font-family: "Arboria", sans-serif; color: var(--white); font-size: clamp(14px, 1.2vw, 18px); }
.pack-contrix img { width: clamp(56px, min(5vw, 10vh), 90px); animation: glow 3.2s ease-in-out infinite; }
.hero .scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 1; width: 30px; opacity: .7; }
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(66,185,110,.25)); } 50% { filter: drop-shadow(0 0 24px rgba(66,185,110,.65)); } }
@media (prefers-reduced-motion: reduce) { .pack-box, .pack-contrix img, .hs.c img, .hero-info { animation: none; } }
@media (max-width: 900px) {
  .hero { padding: 96px 0 60px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-text { text-align: center; }
  .hero-cta { justify-content: center; }
  .pack-box { width: 105px; }
  .hero-stage { --cw: 92px; gap: 10px; }
  .hs-group { gap: 6px; }
  .hero-stage .pack-plus { font-size: 24px; }
  .hero-stage .pack-contrix { gap: 8px; font-size: 12px; }
  .hero-stage { padding-bottom: 24px; }
  .hs-dots { margin-top: 20px; }
  .hero .scroll { display: none; }
}

/* intro: laptop slideshow beside the text */
.intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.laptop { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.laptop .screens { position: relative; width: 100%; aspect-ratio: 16 / 10.6; }
.laptop .screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s; }
.laptop .screens img.on { opacity: 1; }
.intro p.lead { color: var(--muted); margin: 18px 0 26px; font-size: 17px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.checks li { display: flex; gap: 10px; align-items: baseline; }
.checks li::before { content: ""; flex: none; width: 12px; height: 7px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-3px); }

/* features: four circles */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* the academy's four circles, as on the old site (its "Flip Card"): the word on the front,
   the explanation on the back; hover, focus or a tap turns the circle */
.fcard { aspect-ratio: 1; max-width: 300px; width: 100%; margin-inline: auto; perspective: 1000px; outline: 0; cursor: pointer; }
.fcard-in { position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; border: 3px solid #252525; border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,.2); transition: transform .7s ease-in-out; }
.fcard:hover .fcard-in, .fcard:focus .fcard-in { transform: rotateY(180deg); }
.fcard-front, .fcard-back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: #252525; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fcard-front p { margin: 0 0 -6px; color: #fff; font-size: 1.4em; }
.fcard-front strong { color: var(--accent); font-size: clamp(30px, 3vw, 42px); font-weight: 700; }
.fcard-back { transform: rotateY(180deg); padding: 28px; }
.fcard-back p { margin: 0; color: #fff; font-size: 15px; line-height: 1.6; }

/* course sections: numbered icons */
.steps { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.step { text-align: center; width: 120px; }
.step .ic { position: relative; width: 92px; height: 92px; border-radius: 50%; background: #121214; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: grid; place-items: center; margin: 0 auto 12px; }
.step .ic img { width: 40px; height: 40px; }
.step .ic i { position: absolute; top: -4px; inset-inline-start: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--white); font: 700 11px/26px "Arboria", sans-serif; font-style: normal; }
.step h4 { font-family: "Arboria", sans-serif; font-size: 16px; }
/* the steps and the old site's two arrows: each comes out of the side of an outer circle (Beauty at x 14, VFB at x 746, both at y 46,
   the row being 5 x 120 + 4 x 40 = 760 wide with 92px circles), turns down, and ends at a side of the pill; 317 wide, so the ends meet. */
.steps-wrap { position: relative; width: 760px; max-width: 100%; height: 290px; margin: 0 auto; }
.steps-wrap .steps { flex-wrap: nowrap; }
.steps-wrap svg { position: absolute; top: 37.6px; width: 317px; height: auto; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; }
.steps-wrap .arrow-1 { left: -15.2px; }
.steps-wrap .arrow-2 { left: 458.2px; }
.steps-wrap .pill { position: absolute; left: 50%; top: 213px; transform: translateX(-50%); width: 170px; padding-inline: 0; text-align: center; }
/* the old site's drawing: a 480 dash pulled in over .7s while the pointer is on the section; without a pointer they stay drawn */
.steps-wrap path { stroke-dasharray: 480px; stroke-dashoffset: 480px; transition: stroke-dashoffset .7s ease-out; }
.section:hover .steps-wrap path { stroke-dashoffset: 0; transition-timing-function: ease-in; }
@media (hover: none), (prefers-reduced-motion: reduce) { .steps-wrap path { stroke-dashoffset: 0; transition: none; } }
@media (max-width: 800px) {
  .steps-wrap { width: auto; height: auto; }
  .steps-wrap .steps { flex-wrap: wrap; }
  .steps-wrap svg { display: none; }
  .steps-wrap .pill { position: static; transform: none; display: block; margin: 24px auto 0; }
}
.pill { display: inline-block; padding: 12px 30px; border-radius: 999px; background: #121214; color: var(--white); font: 700 15px "Arboria", sans-serif; letter-spacing: 1px; }

/* software */
.software { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.soft { text-align: center; color: var(--muted); font: 15px "Arboria", sans-serif; }
.soft img { width: 100px; height: 100px; margin: 0 auto 14px; }

/* big latin titles: "You Can do this", "Do it Right" */
.big-title { font-family: "Arboria", sans-serif; font-size: clamp(34px, 5vw, 56px); text-align: center; }
.big-title .u { color: var(--accent); }
.big-title .u.r > img:first-of-type { bottom: -.34em; }   /* under the g's tail, not through it */
.big-title .u .check { position: absolute; width: .62em; right: -.8em; top: -.32em; }   /* clear of the t */
.big-title .u.below > img:first-of-type { bottom: -.6em; width: 160%; left: -30%; }
.big-title .arr { position: relative; display: inline-block; }
.big-title .arr img { position: absolute; width: .55em; right: -.6em; top: .2em; }

.fade { position: relative; overflow: hidden; border-radius: var(--radius); }
.fade.tall { aspect-ratio: 4 / 5; }
.fade.wide { aspect-ratio: 16 / 9; }
.fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s; }
.fade img + img { opacity: 0; }
.fade.alt img + img { opacity: 1; }
.can-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.can-row { margin-top: 56px; }
.can-text { text-align: center; color: var(--text); font-size: 17px; line-height: 2; max-width: 900px; margin: 22px auto 0; }
.can-text b { color: var(--accent); font-weight: 400; }
.flips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 64px; }
.flip { aspect-ratio: 289 / 370; perspective: 1000px; cursor: pointer; outline: none; }
.flip-in { position: relative; width: 100%; height: 100%; transition: transform .7s; transform-style: preserve-3d; }
.flip:hover .flip-in, .flip:focus .flip-in { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; inset: 0; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { background: center / cover no-repeat; }
.flip-back { background: #2b2b2b; transform: rotateY(180deg); display: grid; place-items: center; color: var(--accent); font-size: clamp(32px, 4vw, 54px); font-weight: 700; }

/* before / after compare */
.compare {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 16 / 9; user-select: none; touch-action: pan-y; cursor: ew-resize; direction: ltr;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .bar { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--white); transform: translateX(-1px); }
.compare .bar::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;   /* the two arrows drawn, so they sit dead centre in the circle */
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 7l-5 5 5 5M15 7l5 5-5 5'/></svg>") center / 22px no-repeat;
}
.compare .tag { position: absolute; bottom: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.6); font: 13px "Arboria", sans-serif; color: var(--white); }
.compare .tag.l { left: 14px; }
.compare .tag.r { right: 14px; }

/* Do it Right final row: three stacked shots, the HDRI text, a tall render */
.final-row { display: grid; grid-template-columns: minmax(0, 229fr) minmax(0, 340fr) minmax(0, 647fr); gap: 30px; align-items: center; margin-top: 80px; }
.final-stack { display: grid; gap: 20px; }
.final-stack img { width: 100%; aspect-ratio: 229 / 270; object-fit: cover; border-radius: 14px; }
.final-text { text-align: center; }
.final-text .big-title { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 48px; }
.final-text p { color: var(--text); line-height: 2; }
.final-text b { color: var(--accent); font-weight: 400; }
.final-big { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.tour-cta .wrap { display: grid; justify-items: center; gap: 30px; }
.tour-cta .divider { width: 1px; height: 80px; background: linear-gradient(transparent, var(--accent)); }

/* trainer */
.trainer { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.trainer .photo { border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.trainer h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 8px 0 18px; }   /* the same size as every section title */
.trainer p { color: var(--muted); margin-bottom: 12px; }
.trainer-arrow { width: 54px; margin: -6px 0 18px; transform: scaleX(-1); }
.follow > span { color: var(--white); font-size: 18px; }
.follow { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.follow .icons { display: flex; gap: 10px; }
.follow .icons a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.follow .icons a:hover { border-color: var(--accent); }
.follow .icons img { width: 18px; height: 18px; }

/* footer */
/* The link under the Instagram profile (/ar/links/): one narrow column, every button the full width */
.links-in { width: min(100% - 32px, 440px); margin: 0 auto; padding: 28px 0; display: flex; flex-direction: column; gap: 12px; }
.links-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 76px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.links-top .brand { order: 0; margin: 0; }
.links-top .brand .logo { height: 44px; }
.links-line { margin: 0 0 12px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.7; }
.links-in .btn { width: 100%; padding: 0 16px; }
/* the terms page: one column to read */
.terms-page { width: min(100% - 32px, 760px); margin: 0 auto; padding: 130px 0 0; line-height: 1.9; }
.terms-page h1 { margin: 0 0 28px; font-size: clamp(24px, 4vw, 34px); line-height: 1.4; color: var(--white); }
.terms-page h2 { margin: 36px 0 10px; font-size: 21px; color: var(--white); scroll-margin-top: 100px; }
.terms-page p, .terms-page li { color: var(--text); font-size: 16px; }
.terms-page p { margin: 0 0 12px; }
.terms-page ul { margin: 0 0 12px; padding-inline-start: 22px; }
.terms-page #protection { color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 32px; margin-top: 96px; font-size: 14px; color: var(--muted); }
.site-footer .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer .logo img { height: 46px; width: auto; }
.site-footer .mail:hover { color: var(--accent); }
.site-footer .social { justify-content: flex-end; gap: 14px; margin-top: 22px; }
.site-footer .social img { width: 30px; height: 30px; }
.site-footer .legal { margin-top: 28px; font-size: 13px; text-align: center; }

.wa-float {
  position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 40;
  width: 52px; height: 52px; border-radius: 50%; background: #25d366; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
/* the spark's breath, used by the menu's AI */
@keyframes ai-twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .menu-btn { display: block; }
  .nav {
    position: absolute; top: 76px; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(20, 20, 22, .97); border-bottom: 1px solid var(--line); padding: 8px 16px 18px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav .nav-ai::after { inset-inline-end: auto; inset-inline-start: 1.75em; top: 11px; }
  .nav span.lang { display: none; }   /* a row in the phone's menu that does nothing would confuse; it comes back as a link */
  .nav a.lang { width: auto; height: auto; justify-content: flex-start; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; }
  .nav-drop-btn { width: 100%; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-menu { position: static; min-width: 0; padding: 0 16px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav-menu a { border-radius: 0; }
  .nav .btn { margin-top: 14px; }
  .intro, .trainer { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .laptop { max-width: 420px; margin-inline: auto; }
  .features { grid-template-columns: 1fr 1fr; }
  .can-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .flips { grid-template-columns: 1fr 1fr; gap: 16px; }
  .final-row { grid-template-columns: minmax(0, 1fr); }
  .final-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .nav .btn { margin-inline-end: 0; }
  .brand { order: 0; margin-inline-start: 0; }
  .brand .logo { height: 44px; }
}
@media (max-width: 520px) {
  .checks { grid-template-columns: 1fr; }
  .steps { gap: 18px; }
  .step { width: 96px; }
  .compare { aspect-ratio: 4 / 3; }
}

/* the academy under the homepage hero: its name, one sentence, three true numbers, its teaching partners */
.academy { text-align: center; }
.academy-name { font-family: "Arboria", sans-serif; font-size: clamp(30px, 4.4vw, 58px); color: var(--white); line-height: 1.15; margin: 0; }
.academy-lead { max-width: 780px; margin: 18px auto 0; color: var(--text); }
.academy-stats { display: flex; justify-content: center; gap: clamp(40px, 8vw, 120px); margin: 48px 0 0; }
.academy-stats div { display: grid; gap: 4px; }
.academy-stats strong { font-family: "Arboria", sans-serif; font-size: clamp(36px, 4vw, 54px); color: var(--accent); line-height: 1; }
.academy-stats span { color: var(--muted); font-size: 16px; }
.academy-ai { max-width: 820px; margin: 56px auto 28px; color: var(--text); font-size: 18px; line-height: 1.9; }
/* three marks side by side, each in the same box, its name under it: the academy, Contrix, Ask Abdulrahman */
.academy-partners { display: flex; justify-content: center; align-items: flex-start; gap: clamp(40px, 8vw, 110px); padding: 32px 0 8px; }
.lockup { display: grid; justify-items: center; gap: 16px; width: 200px; }
.lockup-mark { display: grid; place-items: center; height: 64px; width: 120px; }
.lockup-mark img { max-height: 64px; max-width: 120px; width: auto; height: auto; transition: filter .3s; }
.lockup-name { font-family: "Arboria", sans-serif; font-size: 17px; color: var(--white); text-align: center; line-height: 1.4; }
a.lockup:hover .lockup-mark img { filter: drop-shadow(0 0 12px rgba(255,255,255,.25)); }
@media (max-width: 520px) { .academy-partners { gap: 10px; } .lockup { width: 33%; gap: 10px; } .lockup-mark { height: 40px; width: 76px; } .lockup-mark img { max-height: 40px; max-width: 76px; } .lockup-name { font-size: 12px; } .features { grid-template-columns: minmax(0, 1fr); } .fcard { max-width: 240px; } }

/* inner page hero */
.page-hero { position: relative; padding: 170px 0 90px; text-align: center; background: center / cover no-repeat; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.7), #000); }
.page-hero { -webkit-mask-image: linear-gradient(#000 calc(100% - 80px), transparent); mask-image: linear-gradient(#000 calc(100% - 80px), transparent); }   /* the hero melts into the page ground, no band at its foot */
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-family: "Arboria", sans-serif; font-size: clamp(32px, 5vw, 56px); }
.page-hero p { color: var(--accent); font-family: "Arboria", sans-serif; font-size: 18px; margin-top: 6px; }
.page-hero .hero-note { color: var(--text); font-family: var(--font); font-size: 16px; margin-top: 10px; }
.pcard .aai-note { margin-top: -4px; }
.page-hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.goal { max-width: 860px; margin-inline: auto; text-align: center; }
.goal p { color: var(--muted); font-size: 17px; }

/* course modules: text beside a video, alternating */
.modules { display: grid; gap: 112px; }
.module { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.module:nth-child(even) .module-media { order: -1; }
.module h3 { font-size: 30px; margin: 4px 0 14px; }
.module h3 .latin { color: var(--accent); font-size: 18px; margin-inline-start: 8px; font-weight: 400; }
.module p { color: var(--muted); }
.module blockquote { margin: 20px 0 0; padding: 16px 20px; border-inline-start: 2px solid var(--accent); background: var(--bg-2); border-radius: 0 12px 12px 0; color: var(--text); }
.module-media { position: relative; aspect-ratio: 1000 / 667; }
.module-media video { position: absolute; left: 13.2%; top: 9.3%; width: 73.3%; height: 61.3%; object-fit: cover; background: #000; }
.module-media img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.module-icon { width: 96px; height: 96px; margin-bottom: 10px; }
.module .study { color: var(--accent); margin-bottom: 6px; }
.module .checks { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
.module blockquote::before { content: "\201D"; color: var(--accent); margin-inline-end: 6px; }
.module blockquote::after { content: "\201C"; color: var(--accent); margin-inline-start: 6px; }
.module:nth-child(odd) { background: rgba(255,255,255,.035); box-shadow: 0 0 0 100vmax rgba(255,255,255,.035); clip-path: inset(-56px -100vmax); }


/* workshops gallery */
.sub-title { text-align: center; font-size: clamp(22px, 2.4vw, 30px); margin: 64px 0 28px; }
.sub-note { text-align: center; color: var(--accent); margin: -20px 0 24px; }
.gallery.corona { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery.corona img { aspect-ratio: 3200 / 2286; }
.gallery .placeholder { grid-column: 1 / -1; display: grid; place-items: center; aspect-ratio: 4 / 1; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.gallery .wide { grid-column: span 2; }
.gallery .wide img { aspect-ratio: 1040 / 650; }
.gallery button:hover img { transform: scale(1.04); }
.ws-rows { display: grid; gap: 14px; }
.ws-row { position: relative; border-radius: 12px; overflow: hidden; }
.ws-row > img { width: 100%; height: auto; }
.ws-row::after { content: ""; position: absolute; inset: 72% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.5)); pointer-events: none; }   /* just enough for the icons to read */
.ws-tags { position: absolute; left: 50%; bottom: 12px; z-index: 1; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; pointer-events: none; }
.ws-hit button { position: relative; }
.ws-hit button:hover img { transform: none; }
.ws-hit .ws-tags { width: 100%; padding: 0 8px; }
.ws-tag { display: flex; align-items: center; gap: 8px; color: var(--white); font: 700 14px "Arboria", sans-serif; white-space: nowrap; }
.ws-tag img { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: #121214; }
@media (max-width: 700px) { .ws-tags { bottom: 6px; gap: 4px; } .ws-tag span { display: none; } .ws-tag img { width: 24px; height: 24px; padding: 4px; } }
.ws-hit, .gallery.ws-hit { position: absolute; inset: 0; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* four quarters, on a phone too */
.ws-hit button { border-radius: 0; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
.lightbox::backdrop { background: rgba(0,0,0,.9); }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 12px; }
.lightbox form { position: fixed; top: 16px; inset-inline-end: 16px; }
.lightbox .x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 22px; cursor: pointer; }

/* price box with the course box art */
.pay-card .pdf-link { display: table; margin-top: 10px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.pay-card .pdf-link:hover { color: var(--accent); }
#buy, #content, #combo-buy, #course-buy { scroll-margin-top: 96px; }
/* the combination's buy block: one part per course (main first), a thin line between, the shared points once */
/* prices page: a course card's "شراء" opens that course's buy block right under the cards */
.course-buy { position: relative; margin-top: 40px; }
.course-buy[hidden] { display: none; }
.course-buy-x { position: absolute; top: -14px; inset-inline-start: 18px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; }
.course-buy-x:hover { border-color: var(--accent); color: var(--accent); }
.pcard.picked { box-shadow: 0 0 0 1px var(--accent); }
.combo-buy { margin-top: 56px; }
.combo-buy [hidden] { display: none !important; }
.combo-buy .pay-card { grid-template-columns: minmax(0, 1fr); }
.combo-buy[hidden] { display: none; }
.pcard:has([data-course-buy]) { cursor: pointer; }
/* under each course, what comes with it from AI: an orange "AI" and one plain line */
.pay-ai { margin: -4px 0 16px; color: var(--text); font-size: 15px; line-height: 1.8; }
/* each course a clear part: its name as the part's title */
.combo-buy .pay-course { margin: 6px 0 12px; color: var(--accent); font: 700 20px "Arboria", sans-serif; }
.combo-buy .pay-part + .pay-part { padding-top: 22px; margin-top: 10px; }
.pay-ai-k { display: inline-block; margin-inline-end: 6px; color: var(--accent); font-family: "Arboria", sans-serif; font-weight: 700; }
.pay-part + .pay-part { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.pay-part .pay-list { margin-bottom: 14px; }
/* buy block, after the old check-out page: an orange-edged card with what you get and the box,
   then the total and the buy button side by side, what happens after paying, and a help strip */
.pay-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 34px; border: 2px solid var(--accent); border-radius: 30px; }
.pay-course { color: var(--accent); font-size: 16px; margin: 0; }
.pay-card h2 { font-size: clamp(28px, 3vw, 40px); margin: 4px 0 18px; }
.pay-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.pay-list li { position: relative; padding-inline-start: 20px; }
.pay-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pay-card .protect { color: var(--muted); font-size: 14px; margin: 0; }
.pay-card .protect b { color: var(--accent); font-weight: 400; }
.pay-terms { display: table; margin-top: 6px; color: var(--accent); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 20px; margin-top: 22px; }
.pay-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 30px; border-radius: 25px; background: var(--bg-2); font-size: clamp(28px, 2.8vw, 40px); font-weight: 700; color: var(--white); }
.pay-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 30px; border: 2px solid var(--line); border-radius: 20px; font-size: clamp(20px, 2vw, 28px); }
.pay-after { text-align: center; color: var(--text); margin: 26px 0 0; }
.pay-help { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 36px; padding: 40px; border-radius: 28px; background: var(--bg-2); }
.pay-help .kicker { margin: 0; }
.pay-help h3 { font-size: clamp(26px, 2.8vw, 38px); margin: 6px 0 0; }
.pay-help .btn svg { width: 22px; height: 22px; fill: currentColor; }
/* the arrow on buy buttons, as on the old site */
.btn.go::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 900px) {
  .pay-card, .pay-row, .combo-buy .pay-card { grid-template-columns: minmax(0, 1fr); }
  .pay-card { padding: 24px 20px; gap: 24px; }
  .pay-card .offer-pack { order: -1; position: static; }
  .pay-total, .pay-cta { padding: 18px 20px; }
  .pay-help { padding: 26px 20px; }
}
.buy-bar { display: none; }
.buy-bar:not([hidden]) { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; padding-inline-start: 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(20,20,22,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.buy-bar .latin { color: var(--white); font-size: 15px; }
.pay-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.to-prices { display: flex; justify-content: center; margin: 0 0 28px; }
@media (max-width: 900px) {
  .buy-bar:not([hidden]) { position: fixed; inset: auto 0 0; transform: none; border-radius: 0; border-width: 1px 0 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: rgba(15,15,16,.96); border-top: 1px solid var(--line); }
  .buy-bar .latin { font-size: 15px; color: var(--white); }
  .buy-bar:not([hidden]) ~ .wa-float { bottom: 78px; }
}

/* faq */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--bg-2); border-radius: 14px; padding: 4px 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; color: var(--white); font-weight: 700; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 18px; }

@media (max-width: 900px) {
  .module { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .module:nth-child(even) .module-media { order: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) { .gallery.corona { grid-template-columns: minmax(0, 1fr); } }

.placeholder-box { border: 1px dashed var(--line); background: transparent; color: var(--muted); }
/* students: their renders drift slowly, clear and uncovered, each with the student's name under it */
.stu-row { overflow-x: auto; scrollbar-width: none; }
.stu-row::-webkit-scrollbar { display: none; }
.stu-track { display: flex; align-items: flex-start; gap: 24px; width: max-content; padding: 4px 0; }
.stu-work { flex: none; margin: 0; display: grid; gap: 14px; }
/* the strip: inside the page width, four works across (two on a phone), each the same 4:5 cut; it snaps to a work */
.stu-strip { position: relative; }
.stu-works { cursor: grab; }
.stu-works.is-drag { cursor: grabbing; }
.stu-works .stu-work { width: calc((100% - 3 * 24px) / 4); }
.stu-works .stu-track { width: 100%; }
.stu-arrow { position: absolute; top: calc(50% - 20px); transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.stu-arrow:hover { border-color: var(--accent); color: var(--accent); }
.stu-arrow-prev { left: max(-22px, calc((100% - 100vw) / 2 + 10px)); }   /* never past the page's margin: past it the arrow widened the whole page */
.stu-arrow-next { right: max(-22px, calc((100% - 100vw) / 2 + 10px)); }
.stu-work button { display: block; padding: 0; border: 0; background: none; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.stu-work img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; -webkit-user-drag: none; user-select: none; }
.stu-work button:hover img { transform: scale(1.03); }
.stu-work figcaption { font-family: "Arboria", sans-serif; font-size: 14px; letter-spacing: .03em; color: var(--muted); text-align: center; }
/* Works page: every work whole, in rows of one height; a row's works share its width by their shape, so the order holds */
.stu-all { --h: 300px; display: flex; flex-wrap: wrap; gap: 28px 14px; margin-top: 44px; }
.stu-all::after { content: ""; flex: 1000 0 0; }   /* the last row keeps its height instead of stretching */
.stu-all.is-fit::after { display: none; }   /* the script cuts the rows, so the last one fills too */
.stu-all .stu-work { flex: var(--r) 1 calc(var(--r) * var(--h)); min-width: 0; }
.stu-all .stu-work button { width: 100%; }
.stu-all .stu-work img { aspect-ratio: var(--r); object-fit: fill; }
.stu-box.rtl .stu-prev { left: auto; right: 20px; }
.stu-box.rtl .stu-next { right: auto; left: 20px; }
@media (max-width: 900px) { .stu-all { --h: 170px; gap: 20px 10px; margin-top: 28px; } }
.stu-more { display: flex; justify-content: center; margin-top: 44px; }
/* the lightbox: full black, the work, the name under it, arrows on the sides */
.stu-box { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.stu-box::backdrop { background: #000; }
.stu-box figure { margin: 0; display: grid; justify-items: center; gap: 16px; }
.stu-box img { max-width: calc(100vw - 160px); max-height: 82vh; border-radius: 10px; }
.stu-box [hidden] { display: none !important; }
.stu-box form { position: fixed; top: 16px; inset-inline-end: 16px; }
.stu-box .x, .stu-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; }
.stu-nav { position: fixed; top: 50%; transform: translateY(-50%); font-size: 28px; }
.stu-nav:hover, .stu-box .x:hover { border-color: var(--accent); color: var(--accent); }
.stu-prev { left: 20px; }
.stu-next { right: 20px; }
.stu-cap { font-family: "Arboria", sans-serif; text-align: center; color: var(--white); font-size: 16px; letter-spacing: .03em; }
@media (max-width: 520px) {
  .stu-track { gap: 18px; }
  .stu-works .stu-work { width: calc((100% - 14px) / 2); }
  .stu-works .stu-track { gap: 14px; }
  .stu-arrow { top: calc(50% - 16px); width: 38px; height: 38px; font-size: 24px; }
  .stu-arrow-prev { left: -8px; }
  .stu-arrow-next { right: -8px; }
  .stu-work figcaption { font-size: 12px; }
  .stu-box img { max-width: 100vw; border-radius: 0; }
  .stu-nav { top: auto; bottom: 20px; transform: none; }
}
.big-number { text-align: center; color: var(--white); font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.big-number .latin { color: var(--accent); font-size: 1.3em; }
.gallery.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Start in Control: each section's screens under its lessons, and steps numbered instead of drawn */
.gallery.screens { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 16px; }
.gallery.screens img { aspect-ratio: 16 / 9; }
.step .ic b { font: 700 26px/1 "Arboria", sans-serif; color: var(--white); }
/* course pages: under the stars, a very dark touch of the course's own colour (Start navy, Animation green) */
body.tint-start { background: #000 radial-gradient(ellipse at 50% 0%, #07142a -30%, #010307 70%) fixed; }
body.tint-anim { background: #000 radial-gradient(ellipse at 50% 0%, #061c13 -30%, #010403 70%) fixed; }
/* Start in Control's sections, on one rule: the number and the name, then the lessons, then the screens, all from the same edge;
   the screen beside it the same size each time, the sides alternating, the same space between them */
.sic.modules { gap: 0; }
.sic .module blockquote { margin-bottom: 26px; }   /* the section's line, then its lessons */
.sic .module { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; padding: 64px 0; background: none; box-shadow: none; clip-path: none; border-top: 1px solid rgba(255,255,255,.07); }
.sic .module:first-child { border-top: 0; }
.sic .module:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.sic .module > div:first-child { display: grid; justify-items: start; align-content: center; justify-self: center; width: min(100%, 380px); }
.sic .module > div:first-child > * { text-align: start; }
.sic .module .study.latin { margin: 0; font: 700 15px "Arboria", sans-serif; letter-spacing: .08em; }
.sic .module h3 { margin: 2px 0 18px; font-size: 32px; }
.sic .module .study:not(.latin) { margin: 0; font-size: 14px; }
.sic .module .checks { justify-items: start; }
.sic .gallery.screens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sic .gallery.screens button { width: 86px; }
@media (max-width: 900px) { .sic .module, .sic .module:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 0; } .sic .module > .module-media { order: -1; } .sic .gallery.screens button { width: calc((100% - 16px) / 3); } }
.offer-pack { display: grid; justify-items: center; align-self: start; position: sticky; top: 110px; }   /* pinned beside the long list */
/* the buy block's picture: the boxes standing on one line (main in front, then Animation, then Start), then + Contrix,
   and + Ask Abdulrahman with the main course; every mark in the same box so marks and "+" share one line */
.op-row { --m: clamp(52px, 4.6vw, 68px); display: flex; align-items: center; justify-content: center; gap: 14px; padding-bottom: 34px; }
.op-boxes { display: flex; align-items: flex-end; }
.op-boxes img { width: clamp(118px, 11vw, 160px); filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); }
.op-boxes img:first-child { position: relative; z-index: 3; }
.op-boxes img + img { width: clamp(86px, 8vw, 116px); margin-left: -26px; position: relative; z-index: 2; }
.op-boxes img + img + img { width: clamp(74px, 6.8vw, 100px); z-index: 1; }
.op-plus { color: var(--accent); font: 400 30px/1 "Arboria", sans-serif; }
/* a bundle (two boxes or more): the boxes keep the whole width, and Contrix and Ask Abdulrahman go on a line of their own under them */
.op-row:has(.op-boxes img:not([hidden]) ~ img:not([hidden])) { flex-wrap: wrap; row-gap: 26px; }
.op-row:has(.op-boxes img:not([hidden]) ~ img:not([hidden])) .op-boxes { flex: 0 0 100%; justify-content: center; }
.op-mark { position: relative; display: grid; justify-items: center; }
.op-mark img { width: var(--m); height: var(--m); object-fit: contain; }
.op-mark.op-aai img { width: calc(var(--m) * 1.4); }
.op-mark span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; white-space: nowrap; color: var(--white); font-family: "Arboria", sans-serif; font-size: 13px; }
.op-line { margin: 0 0 6px; color: var(--white); font: 500 18px/1.5 "Arboria", sans-serif; text-align: center; }   /* under the box: what comes with it, in the academy's own type and colours */
.op-line span { color: var(--muted); }
.op-line b { color: var(--accent); font-weight: 400; }
@media (max-width: 900px) { .gallery.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* courses list and bundles */
.page-top { padding-top: 140px; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 22px; border-radius: 22px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(160deg, rgba(40,40,44,.55), rgba(14,14,16,.7)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 60px rgba(0,0,0,.4); }   /* glass, like the hero card */
/* prices page: still, for deciding; a soft orange glow behind the cards instead of moving stars */
body.calm::before, body.calm::after { display: none; }
.calm-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 40% at 50% 55%, rgba(255,62,0,.12), transparent 70%); }
.pcard .pbox img { width: 170px; filter: drop-shadow(0 20px 26px rgba(0,0,0,.6)); transition: transform .3s; }
.pcard .pbox:hover img { transform: translateY(-6px); }
.pcard h3 { font-size: 22px; margin-top: 14px; }
.pcard .line { color: var(--muted); font-size: 15px; }
.pcard .level { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; }
.meta { color: var(--text); font-size: 14px; }
.edu { color: var(--muted); font-size: 14px; }
.edu .latin { color: var(--white); }   /* the academy's colours, not Contrix's green */
.pprice { font-size: 38px; font-weight: 700; color: var(--white); margin-top: auto; padding-top: 10px; }
.pprice s { font-size: 20px; color: var(--muted); font-weight: 400; margin-inline-end: 8px; }
.save { color: var(--accent); font-size: 15px; }
/* add-a-course offer, one course per row: the main course at full price, each added one at half with its full price struck */
.bcalc { list-style: none; width: 100%; margin: 14px 0 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.bcalc li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--muted); }
.bcalc li > span:last-child { color: var(--white); }
.bcalc s { color: var(--muted); margin-inline-end: 6px; }
.bcalc small { color: var(--white); background: var(--accent); border-radius: 999px; padding: 0 8px; font-size: 12px; margin-inline-start: 6px; }
/* add a course at half price: the main box with a "+" beside it; a picked course takes the "+"'s place */
/* glass, like the hero card: a light see-through fill over the stars, a thin light edge, an orange glow underneath */
.builder { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 14px; max-width: 760px; margin-inline: auto; padding: 32px; border: 1px solid rgba(255,255,255,.09); border-radius: 28px; background: linear-gradient(160deg, rgba(40,40,44,.55), rgba(14,14,16,.7)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 80px rgba(0,0,0,.45); text-align: center; }
.builder::before { content: ""; position: absolute; inset: auto 10% -40% 10%; height: 70%; background: radial-gradient(closest-side, rgba(255,62,0,.18), transparent); pointer-events: none; z-index: -1; }
.builder[hidden], .builder [hidden] { display: none !important; }
.bld-stage { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 260px; }
.bld-main { width: 160px; filter: drop-shadow(0 20px 26px rgba(0,0,0,.6)); }
.bld-added { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.bld-added img { display: block; width: 128px; filter: drop-shadow(0 20px 26px rgba(0,0,0,.6)); transition: opacity .2s; }
.bld-added:hover img { opacity: .75; }
.bld-xbox { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); color: var(--white); font-size: 20px; line-height: 27px; }
.bld-added:hover .bld-xbox { border-color: var(--accent); color: var(--accent); }
/* the "+" is drawn, not typed, so it sits exactly in the middle of its circle whatever the font */
.bld-plus { display: grid; place-items: center; width: 58px; height: 58px; flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--accent); cursor: pointer; transition: border-color .2s; }
.bld-plus:hover, .bld-plus[aria-expanded="true"] { border-color: var(--muted); }
.bld-plus svg, .bld-sep svg { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bld-sep { display: grid; place-items: center; color: var(--accent); }
.bld-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bld-opt { display: grid; justify-items: center; gap: 6px; width: 190px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.bld-opt:hover { border-color: var(--accent); }
.bld-opt img { width: 70px; }
.bld-opt s { color: var(--muted); }
.bld-opt .off { color: var(--white); background: var(--accent); border-radius: 999px; padding: 0 10px; font-size: 12px; }
.builder .bcalc { max-width: 520px; }
.bld-x { margin-inline-start: 10px; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.bld-x:hover { color: var(--accent); border-color: var(--accent); }
.builder .bcalc { font-size: 17px; }
.builder .bcalc li { align-items: center; padding: 6px 0; }
.builder .bcalc li > span:last-child { white-space: nowrap; }
.builder .bpay { font-size: 18px; }
.builder .bpay span { font-size: 26px; }
.bld-combos { list-style: none; max-width: 760px; margin: 0 auto; padding: 0; display: grid; gap: 8px; }
.bld-combos a { color: var(--accent); text-decoration: underline; }
@media (max-width: 520px) { .builder { padding: 20px 14px; } .bld-stage { flex-wrap: wrap; gap: 8px; row-gap: 14px; min-height: 180px; } .bld-main { width: 108px; } .bld-added img { width: 86px; } .builder .bcalc { font-size: 14px; } .bld-x { width: 26px; height: 26px; margin-inline-start: 6px; } .bld-xbox { width: 26px; height: 26px; line-height: 23px; } .bld-plus { width: 44px; height: 44px; } .bld-plus svg, .bld-sep svg { width: 20px; height: 20px; } }
.bpay { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 16px; }
.bpay span { color: var(--white); font-size: 20px; font-weight: 700; }
.pactions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.ptitle { font-size: clamp(30px, 4vw, 48px); }
.video-slot { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 960px; margin-inline: auto; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.parts { grid-template-columns: 1fr 1fr; max-width: 900px; margin-inline: auto; }
@media (max-width: 900px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .parts { grid-template-columns: 1fr; }
}
.promo { width: min(380px, 100%); margin-inline: auto; border-radius: var(--radius); background: #000; }
.hero-box3d { width: 150px; margin: 0 auto 18px; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
/* Start in Control identity: navy + aqua */
.page-hero.sic::after { background: linear-gradient(rgba(1,29,49,.35), #000); }
.page-hero.sic p { color: #00ffda; }
.page-hero.anim::after { background: linear-gradient(rgba(5,20,22,.6), #000); }
.page-hero.anim p { color: #4be6a3; }
/* a course's buy block: the box alone, large, in the middle of the block's height, its lines larger under it */
.pay-card .offer-pack { align-self: center; position: static; }
.pay-card .op-boxes img { width: clamp(190px, 18vw, 270px); }
.pay-card .op-line { font-size: clamp(19px, 1.6vw, 23px); margin-bottom: 8px; }
@media (max-width: 900px) { .pay-card .op-boxes img { width: 190px; } .pay-card .op-line { font-size: 18px; } }