/* ============================================================
   JGGL Site V4 — stylesheet
   Ported from the Claude Design source `JGGL Site V4.dc.html`.
   ============================================================ */

/* ---------- Instrument Sans (self-hosted subset) ----------
   'Scoutie Sans' is the brand face and is not bundled with the
   design; it stays first in the stack so it is picked up wherever
   it is installed or served, and Instrument Sans is the fallback. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ----------
   Mirrors the source's editable props: accent, maxWidth,
   sectionGap, cardRadius. */

:root { --accent: #FF6C19; --max: 1440px; --sp: clamp(72px, 11vw, 160px); --r: clamp(24px, 3vw, 40px); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0A0A0A;
  color: #F2F2F0;
  font-family: 'Scoutie Sans', 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: #F2F2F0; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: #0A0A0A; }
img { display: block; max-width: 100%; }

@keyframes caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@property --ga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --ga: 360deg; } }

.fade { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* Animated conic border on the hero composer. */
.shine {
  --pct: 8%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#0F0F0F, #0F0F0F) padding-box,
    conic-gradient(from var(--ga),
      rgba(255,108,25,0.10),
      rgba(255,108,25,0.10) calc(50% - var(--pct)),
      #FF6C19 50%,
      #FFB07A calc(50% + var(--pct) / 2),
      rgba(255,108,25,0.10) calc(50% + var(--pct)),
      rgba(255,108,25,0.10)) border-box;
  animation: spinBorder 6s linear infinite;
  transition: --pct 700ms cubic-bezier(.25,1,.5,1);
}
.shine:hover, .shine:focus-within { --pct: 22%; }

.d-only { display: block; }
.m-only { display: none; }
/* Hero из трёх частей. На десктопе текст и поле ввода стоят друг под
   другом в левой колонке, галерея занимает правую целиком. На мобильных
   порядок другой: заголовок, галерея, поле ввода. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  grid-template-areas:
    "copy media"
    "composer media";
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(28px, 4vw, 44px);
  align-items: stretch;
}
.hero-copy { grid-area: copy; }
.hero-composer { grid-area: composer; }
.hero-media { grid-area: media; }

/* Нижний ряд поля ввода. На узких экранах кнопка выбора формата занимает
   всю строку, чтобы подпись с кнопкой отправки всегда уходили под неё.
   Без этого есть промежуточные ширины (примерно 400-470px), где подпись
   встаёт рядом с кнопкой, а кнопка отправки переносится одна. */
@media (max-width: 620px) {
  .composer-actions .fmt-wrap { flex: 0 0 100%; }
}

/* Плитка выбора формата под hero: шесть миниатюр всегда в один ряд.
   На узких экранах они уменьшаются, а не переносятся на второй ряд —
   иначе панель закрывает галерею за ней. Инлайновые стили панели
   перебиваются !important. */
.hero-thumbs { width: min(94%, 470px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 620px) {
  .hero-thumbs {
    width: min(96%, 330px);
    gap: 4px;
    padding: 6px !important;
    bottom: 10px !important;
    border-radius: 12px !important;
  }
  .hero-thumbs .thumb { gap: 3px !important; }
  .hero-thumbs .thumb-ring { border-radius: 7px !important; border-width: 1.2px !important; }
  .hero-thumbs .thumb-label { font-size: 9px !important; }
}

/* Pipeline bento grid. */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.b7 { grid-column: span 7; grid-row: span 2; }
.b5 { grid-column: span 5; }
.b4 { grid-column: span 4; }
.b8 { grid-column: span 8; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
@media (max-width: 1099px) {
  .b7, .b5, .b4, .b8 { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 979px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "media" "composer";
    grid-template-rows: auto auto auto;
  }
}
@media (max-width: 899px) {
  .d-only { display: none; }
  .m-only { display: block; position: relative; }
  /* Панель бургера выведена из потока. Внутри потока она увеличивала
     высоту липкого хедера на ~430px, страница под ним уезжала вниз, и
     браузер компенсировал это прокруткой — visually это читалось как
     самопроизвольный сдвиг страницы. Абсолютное позиционирование
     оставляет высоту хедера неизменной, панель просто накрывает контент. */
  [data-burger-panel] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}

/* Category comparison: wide table vs stacked cards. */
.t-wide { display: block; }
.t-narrow { display: none; }
@media (max-width: 819px) {
  .t-wide { display: none; }
  .t-narrow { display: block; }
}

/* Карусель карточек сравнения. Живёт внутри .t-narrow, который показан
   только до 819px, поэтому на десктопе эти правила ни к чему не применяются
   — там остаётся широкая таблица. */
.cmp-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.cmp-rail::-webkit-scrollbar { display: none; }
.cmp-card {
  /* На 40px уже ленты — на этот край видно следующую карточку. */
  flex: 0 0 calc(100% - 40px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Последняя прилипает правым краем: тогда отступ справа от неё такой же,
   как слева у первой, и в конце ленты выглядывает предыдущая карточка. */
.cmp-card:last-of-type { scroll-snap-align: end; }
@media (pointer: fine) {
  .cmp-rail { cursor: grab; }
  .cmp-rail.is-dragging { cursor: grabbing; }
}
.cmp-rail.is-dragging .cmp-card { user-select: none; }

.cmp-dots { display: flex; justify-content: center; gap: 9px; padding: 18px 0 6px; }
.cmp-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 999px;
  background: #35322E;
  cursor: pointer;
  transition: background .3s ease, width .3s cubic-bezier(.2,.7,.2,1);
}
.cmp-dot.is-active { background: var(--accent); width: 22px; }
.cmp-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cmp-dot { transition: none; } }

.f-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (max-width: 719px) {
  .f-pair { grid-template-columns: 1fr 1fr; }
  .f-tile { padding: 24px 18px !important; gap: 16px !important; }
  .f-tile a { font-size: 15px !important; }
  /* Кнопки сторов друг под другом: в ряд они не помещаются
     в узкой плитке футера на мобильной ширине. */
  .f-stores { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .f-stores > a { justify-content: center; padding: 10px 12px !important; gap: 10px !important; }
  .f-stores .st-sub { display: none; }
  .f-stores .st-name { font-size: 13px !important; }
}

.legal { padding: 26px clamp(24px, 2.6vw, 36px); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.legal-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
@media (max-width: 719px) {
  .legal { flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
  .legal-links { margin-left: 0; justify-content: center; gap: 26px; }
}

@media (max-width: 759px) {
  .split { grid-template-columns: 1fr; }
}

/* Download modal — full-width sheet on small screens. */
@media (max-width: 719px) {
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-panel { max-height: 94% !important; border-radius: 28px 28px 0 0 !important; overflow-y: auto !important; }
  .modal-art { height: 190px !important; }
  .modal-art img { width: 124% !important; }
  .modal-copy { gap: 16px !important; padding-bottom: 34px !important; }
  .modal-cta { flex-direction: column; width: 100%; }
  .modal-cta a { justify-content: center; }
}

/* ---------- Behaviour hooks added by the implementation ----------
   The source drove these through the design runtime's inline
   bindings; as plain CSS they keep the same visual result. */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Hover states the source expressed as style-hover attributes. */
.store-pill { transition: border-color .3s ease, background .3s ease; }
.store-pill:hover { border-color: #4A4744; }
.nav-link { transition: background .3s ease, color .3s ease; }
.nav-link:hover { background: #1A1917; }
.product-card:hover { border-color: #34322F; }
/* Глобальное a:hover красит ссылку в акцент, а карточка продукта — это
   ссылка целиком, из-за чего оранжевыми становились заголовки
   «JGGL App» и «JGGL Buddy». Возвращаем обычный цвет текста. */
.product-card:hover, .product-card:hover h3 { color: #F2F2F0; }
.trow { transition: background .3s ease; }
.trow:hover { background: #0E0E0E; }
.ticker-link:hover { background: rgba(255,108,25,0.05); }
.send-btn:hover { transform: scale(1.07); }
.send-btn:active { transform: scale(0.96); }
.modal-close:hover { color: #F2F2F0; border-color: #3A3835; background: #151413; }
.modal-cta a:hover { border-color: #3E3B37; background: #131211; }

/* Медиа в блоке Get started. Размеры и радиальная маска повторяют
   jggl.ai: маска растворяет края ролика, поэтому его собственный тёмный
   фон сливается с фоном страницы и подложка не видна. */
.gs-media {
  width: 100%;
  max-width: min(90%, 590px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  pointer-events: none;
  /* Верхние и нижние ~15% ролика маска делает полностью прозрачными.
     Без компенсации эта пустота читается как лишний отступ между
     блоками, поэтому подтягиваем ролик вверх и вниз — так же, как
     -mt-6/-mt-10 на jggl.ai. */
  margin-top: clamp(-80px, -5vw, -24px);
  margin-bottom: clamp(-64px, -4vw, -20px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='.85' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='4' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='12' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='512' height='512' fill='url(%23g)' filter='url(%23d)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.45' stop-color='%23fff'/%3E%3Cstop offset='.85' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='4' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='12' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='512' height='512' fill='url(%23g)' filter='url(%23d)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) { .gs-media { animation: none; } }

/* Marquee/ticker pause on hover — the row is duplicated so a
   -50% translate loops seamlessly. */
.marquee-track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.ticker-track { display: flex; width: max-content; animation: slide 26s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .ticker-track, .shine { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}