/* Page styles for "index.html", moved out of the page unchanged (the policy is style-src 'self'). */
@font-face { font-family: "Milker"; src: url("assets/Milker.otf") format("opentype"); font-weight: 400 900; font-display: swap; }
:root { --frag-grain: none; --frag-grain-size: auto; }
/* Arabic: monospace micro-labels use wide tracking, which breaks Arabic letter joining; use the Arabic face, no tracking, readable size. */
[dir="rtl"] [style*="IBM Plex Mono"] { font-family: "IBM Plex Sans Arabic", "IBM Plex Mono", monospace !important; letter-spacing: 0 !important; font-size: max(12px, 1em) !important; text-transform: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: #F8F8FA var(--frag-grain); background-size: var(--frag-grain-size); -webkit-font-smoothing: antialiased; scrollbar-width: none; -ms-overflow-style: none; }
html { scrollbar-width: none; }
body::-webkit-scrollbar, html::-webkit-scrollbar { width: 0; height: 0; }
a { color: #7C3AED; text-decoration: none; }
a:hover { color: #A78BFA; }
::selection { background: #E9D5FF; color: #11131C; }
::-moz-selection { background: #E9D5FF; color: #11131C; }
@keyframes fragScrollTick { 0% { transform: translateY(-60%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(140%); opacity: 0; } }
#faq-list::-webkit-scrollbar { width: 8px; }
#faq-list::-webkit-scrollbar-track { background: transparent; }
#faq-list::-webkit-scrollbar-thumb { background: rgba(17,19,28,.22); border-radius: 999px; }
#faq-list::-webkit-scrollbar-thumb:hover { background: rgba(17,19,28,.36); }
/* The FAQ list scrolls inside its own box. The edge that still hides questions
   fades out instead of cutting a card in half. frag-page-home.js measures the
   list and sets the two lengths; both are 0 (no fade, the list as it always
   looked) at that end of the list, when everything fits, or without the script. */
#faq-list {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--faq-fade-top, 0px), #000 calc(100% - var(--faq-fade-bottom, 0px)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--faq-fade-top, 0px), #000 calc(100% - var(--faq-fade-bottom, 0px)), transparent 100%);
}
/* Team dots stay 7px to the eye; the area that answers a tap or click is larger. */
.team-dot { position: relative; }
.team-dot::after { content: ""; position: absolute; inset: -16px -4px; }
:focus-visible { outline: 2px solid #7C3AED; outline-offset: 3px; border-radius: 6px; }
@keyframes cartPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes drawerIn { from { transform: translateX(var(--from, 24px)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
#cart-lines::-webkit-scrollbar { width: 8px; }
#cart-lines::-webkit-scrollbar-thumb { background: rgba(17,19,28,.22); border-radius: 999px; }
@keyframes beatNumIn { 0% { opacity: 0; transform: translateY(22px) scale(.9); filter: blur(10px); } 55% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes beatPlateIn { 0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes menuSheetIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes teamCharIn { 0% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 70% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes teamWordIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes teamSwapInA { 0% { opacity: 0; transform: translateY(14px); filter: blur(5px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes teamSwapInB { 0% { opacity: 0; transform: translateY(14px); filter: blur(5px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
/* The Discord mascot drifts up and down a little, like the jump it is drawn in. */
@keyframes discordFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(-1.5deg); } }
.discord-mascot { animation: discordFloat 5.2s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* Team: the photo row is as tall as the photos, so the name sits right under them. */
.team-stage { height: 196px !important; margin-bottom: 4px !important; }
@media (max-width: 760px) { .team-stage { height: 162px !important; } }
/* Team dots and the FAQ rows answer a press. */
.team-dot { transition: transform .15s ease, background-color .2s ease, width .2s ease; }
.team-dot:active { transform: scale(.8); }

/* Cart: a line settles in when it is added, and its picture answers the pointer. */
@keyframes cartLineIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.frag-cart-line { animation: cartLineIn .28s cubic-bezier(.22,1,.36,1) both; transition: border-color .18s ease, box-shadow .18s ease; }
.frag-cart-line:hover { border-color: rgba(17,19,28,.16) !important; box-shadow: 0 10px 24px -20px rgba(17,19,28,.5); }
@media (prefers-reduced-motion: reduce) { .frag-cart-line { animation: none; } }

/* FAQ: the search shows where the keyboard is, the browser's own clear button gives way to ours,
   and a link to #team or #faq stops below the floating header instead of under it. */
.frag-faq-search { transition: border-color .16s ease, box-shadow .16s ease; }
.frag-faq-search:focus-within { border-color: rgba(124,58,237,.45) !important; box-shadow: 0 0 0 4px rgba(124,58,237,.10); }
.frag-faq-search input::-webkit-search-cancel-button { display: none; }
.frag-faq-search input::placeholder { color: #7D8193; }
#team, #faq { scroll-margin-top: 84px; }

/* Team: the band starts on the tone the hero ends on and eases into the page's own
   background before the next section, so there is no hard edge between the two. */
.team-band {
  /* The same wash as the top of the page (blue from the left, pink from the right, lavender
     in between), kept off the top and bottom edges so the band still meets its neighbours cleanly. */
  background-image: var(--frag-grain),
    radial-gradient(46% 56% at 0% 40%, rgba(96,130,255,.32) 0%, rgba(120,150,255,.14) 45%, rgba(120,150,255,0) 75%),
    radial-gradient(44% 54% at 100% 42%, rgba(255,150,200,.34) 0%, rgba(255,170,215,.15) 45%, rgba(255,170,215,0) 75%),
    radial-gradient(38% 30% at 50% 38%, rgba(167,139,250,.18) 0%, rgba(167,139,250,0) 75%),
    linear-gradient(to bottom, #F2F2F6 0%, #F2F2F6 42%, #F8F8FA 100%);
  background-size: var(--frag-grain-size), 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Team: the photos can be swiped sideways without blocking the page's own scroll,
   show where the keyboard is, and the arrows either side of the dots answer a press. */
.team-stage { touch-action: pan-y; outline: none; }
.team-stage:focus-visible { outline: 2px solid rgba(124,58,237,.32); outline-offset: 6px; border-radius: 24px; }
.team-dot { transition: transform .15s ease, background-color .25s ease, width .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.team-dot:hover { opacity: .6 !important; }
.team-dot[aria-current="true"]:hover { opacity: 1 !important; }
.team-arrow:active { scale: .92; }

/* The holder of the glass filter for the price digits (made by the page script). */
/* The truck stage is a picture to scroll through, not text: a double-click or a double-tap on it selects nothing (a
   selection drew the glass price as one solid slab) and does not zoom the page. Scrolling and pinch-zoom are untouched. */
[data-frag-stage] {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Safari's glass price (see syncGlassSvg): an SVG laid over the page's own, invisible, price. */
.frag-price-svg-slot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.frag-price-svg-slot > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.frag-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* The offer's two buttons under the price: the purchase in the site's purple, the demo in white. */
.frag-offer-buy, .frag-offer-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: Nohemi, 'IBM Plex Sans Arabic', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
}
/* Lit from above like the glass price: a soft gradient, a bright top edge, a close shadow under
   a wider, fainter one. */
.frag-offer-buy {
  padding: 0 28px;
  color: #FFFFFF;
  background: linear-gradient(180deg, #8B5CF6 0%, #7C3AED 55%, #6D28D9 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 2px 4px -1px rgba(46,16,101,.35), 0 12px 24px -12px rgba(76,29,149,.7);
}
.frag-offer-demo {
  color: #11131C;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F7 100%);
  border: 1px solid rgba(17,19,28,.1);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 4px -1px rgba(3,30,21,.16), 0 12px 24px -16px rgba(3,30,21,.6);
}
/* The buttons hold still under the pointer and the click: light and colour answer instead. Hover only where there is a
   pointer that hovers (on a phone a tap left it stuck on). */
@media (hover: hover) {
  .frag-offer-buy:hover {
    filter: brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px -2px rgba(46,16,101,.4), 0 16px 28px -12px rgba(76,29,149,.75);
  }
  .frag-offer-demo:hover { border-color: #7C3AED; color: #7C3AED; }
}
.frag-offer-buy:active { filter: brightness(.94); }
.frag-offer-demo:active { background: #EEF0F4; }
/* ...and not the site-wide press shrink either (frag-site.css). */
#dc-root button.frag-offer-buy:active:not(:disabled), #dc-root button.frag-offer-demo:active:not(:disabled) { scale: none; }
/* The two buttons always sit side by side; on a narrow screen they get tighter instead of stacking. */
@media (max-width: 400px) {
  .frag-offer-buy, .frag-offer-demo { padding: 0 16px; font-size: 14px; letter-spacing: 0; }
}
@media (max-width: 340px) {
  .frag-offer-buy, .frag-offer-demo { padding: 0 12px; font-size: 13px; }
  .frag-offer-buy .frag-ic { display: none; }
}
.frag-offer-buy:focus-visible, .frag-offer-demo:focus-visible { outline: 2px solid #7C3AED; outline-offset: 3px; }
/* Asked for less transparency: the price is solid emerald instead of glass. */
@media (prefers-reduced-transparency: reduce) {
  .frag-price-glass { filter: drop-shadow(0 .02em .04em rgba(3,22,13,.45)) !important; }
}

/* The tall price follows the scroll. Under reduced motion it does so without the springy catch-up. */
@media (prefers-reduced-motion: reduce) { .frag-price-tall { transition: none !important; } }