/* =============================================================
   isqod — UX-UI demo case page (Figma-exact rebuild)
   Light theme. Scoped under .case-isqod-ui to override shared dark
   .case-* rules from styles.css. Touch only this file + the HTML.
   Figma frame: ppMhxLpkjU8DT8grVOigNF node 133:261, width 1280, pad 56.
   ============================================================= */

.case-isqod-ui {
  --iq-yellow: #fcfb65;
  --iq-yellow-num: #f4d738;  /* stat-strip number tint */
  --iq-yellow-bar: #f6d23a;  /* chart / CTA placeholder */
  --iq-ink: #15151c;
  --iq-ink-2: #3a3a44;
  --iq-muted: #73737e;
  --iq-meta: #5c5c50;
  --iq-paper: #f4f3ee;       /* process / screens bg */
  --iq-green: #1f9d63;       /* kicker / active accent */
  --iq-card-border: #e7e5dc;
  --iq-line: #ebe9e0;
  --iq-grey: #cfcdc2;        /* placeholder bars */
  --iq-grey-2: #d9d7cd;
  --iq-grey-3: #dcdad0;
  --iq-chip-y: #f6f8c4;      /* step number chip */
  --iq-mint: #ddf5e9;        /* check chip bg */
  --iq-mint-2: #cfe9d8;      /* phone thumb */
  --shadow-card: 0px 1px 1px rgba(20,20,28,.04), 5px 10px 12.7px rgba(20,20,28,.08);
  --shadow-mock: 5px 10px 25.4px rgba(20,20,28,.08);
}

/* ---- page-level reset of the shared dark chrome ---- */
.case-isqod-ui.case-page,
.case-isqod-ui .case-page,
.case-isqod-ui main.case-page { background: #fff; color: var(--iq-ink); }
.case-isqod-ui .case-page { background: transparent; }
body.case-isqod-ui { background: #fff; }
/* clip (not hidden) avoids forming a scroll container, so position:fixed/sticky
   chrome keeps working, while killing horizontal scroll from off-canvas menu. */
body.case-isqod-ui { overflow-x: clip; }
.case-isqod-ui main.case-page { overflow-x: clip; }

/* Container side padding = Figma 56px */
.case-isqod-ui .container { max-width: 1280px; padding-inline: 56px; }
@media (max-width: 1024px){ .case-isqod-ui .container { padding-inline: 40px; } }
@media (max-width: 520px){ .case-isqod-ui .container { padding-inline: 20px; } }

/* Every section is a full-bleed coloured band; inner .container holds content */
.case-isqod-ui .iq-section { width: 100%; }
.case-isqod-ui .iq-section > .container { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.case-isqod-ui .iq-pad { padding-block: 72px; }

/* Backgrounds per Figma */
.case-isqod-ui .iq-paper { background: var(--iq-paper); }
.case-isqod-ui .iq-white { background: #fff; }

/* =========================================================
   Shared section header: kicker + h2 + intro
   ========================================================= */
.case-isqod-ui .iq-kicker {
  display: inline-flex; align-items: center; margin: 0;
  font-weight: 700; font-size: 13px; line-height: 1;
  letter-spacing: 3px; text-transform: uppercase; color: var(--iq-ink);
}
.case-isqod-ui .iq-kicker.green { color: var(--iq-green); }
.case-isqod-ui .iq-h2 {
  font-weight: 800; font-size: 34px; line-height: 1.12; letter-spacing: -1px;
  color: var(--iq-ink); max-width: none; margin: 0;
}
.case-isqod-ui .iq-intro {
  font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-muted);
  max-width: 880px; margin: 0;
}

/* =========================================================
   "Открыть макет в Figma →" button (white, dark border, pill)
   ========================================================= */
.case-isqod-ui .iq-figbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--iq-ink); border-radius: 999px;
  padding: 14px 24px; font-weight: 700; font-size: 15px; line-height: 1;
  color: var(--iq-ink); text-decoration: none; transition: background .15s ease;
}
.case-isqod-ui .iq-figbtn:hover { background: #faf9f2; }
.case-isqod-ui .fig-logo { display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin-right: 8px; flex: 0 0 auto; }

/* =========================================================
   01 HERO  (bg #fcfb65)
   ========================================================= */
.case-isqod-ui .iq-hero { background: var(--iq-yellow); padding: 80px 0 40px; position: relative; overflow: hidden; }
.case-isqod-ui .iq-hero > .container { gap: 25px; position: relative; z-index: 1; }

.case-isqod-ui .iq-hero-tags { display: flex; flex-wrap: wrap; gap: 9.6px; }
.case-isqod-ui .iq-tag {
  display: inline-flex; align-items: center;
  background: rgba(21,21,28,.08);
  border: 1.2px solid rgba(21,21,28,.18);
  border-radius: 999px; padding: 7.2px 15.6px;
  font-weight: 600; font-size: 14px; line-height: 1; color: var(--iq-ink);
}
.case-isqod-ui .iq-hero h1 {
  font-weight: 800; font-size: 58px; line-height: 1.04; letter-spacing: -1.16px;
  color: var(--iq-ink); margin: 0; max-width: none;
}
.case-isqod-ui .iq-hero-sub {
  font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink-2); margin: 0; max-width: none;
}
.case-isqod-ui .iq-hero .iq-figbtn { margin: 0; }
.case-isqod-ui .iq-hero-rule { width: 100%; height: 2.4px; background: rgba(21,21,28,.18); }

.case-isqod-ui .iq-hero-meta {
  display: flex; flex-wrap: wrap; gap: 36px; width: 100%;
  border: none; margin: 0; padding: 0;
}
.case-isqod-ui .iq-hero-meta .mi { display: flex; flex-direction: column; gap: 6px; }
.case-isqod-ui .iq-hero-meta .k {
  font-weight: 700; font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: var(--iq-meta); margin: 0;
}
.case-isqod-ui .iq-hero-meta .v { font-weight: 600; font-size: 19px; color: var(--iq-ink); margin: 0; }

/* Hero decorative — 3 concentric rings (Figma "Component 1" 133:279) */
.case-isqod-ui .iq-hero-blob {
  position: absolute; left: -210px; top: 150px; width: 520px; height: 520px;
  opacity: .55; pointer-events: none; z-index: 0;
}
.case-isqod-ui .iq-hero-blob i {
  position: absolute; display: block; border: 2px solid #2e5bff; border-radius: 50%;
}
.case-isqod-ui .iq-hero-blob i:nth-child(1) { width: 600px; height: 600px; left: -180px; top: 100px; }
.case-isqod-ui .iq-hero-blob i:nth-child(2) { width: 460px; height: 460px; left: -110px; top: 170px; }
.case-isqod-ui .iq-hero-blob i:nth-child(3) { width: 320px; height: 320px; left: -40px;  top: 240px; }

/* =========================================================
   02 STAT STRIP  (bg #15151c)
   ========================================================= */
.case-isqod-ui .iq-statstrip { background: var(--iq-ink); }
.case-isqod-ui .iq-statstrip .container { padding-block: 0; }
.case-isqod-ui .iq-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.case-isqod-ui .iq-stats .stat {
  padding: 48px 20px; border-right: 1.2px solid #2a2a34;
  display: flex; flex-direction: column; gap: 9.6px; align-items: flex-start; justify-content: center;
}
.case-isqod-ui .iq-stats .stat:last-child { border-right: none; }
.case-isqod-ui .iq-stats .num { font-weight: 800; font-size: 52px; line-height: 1; color: var(--iq-yellow-num); }
.case-isqod-ui .iq-stats .lab { font-weight: 600; font-size: 19px; line-height: 1.2; color: #fff; }
.case-isqod-ui .iq-stats .hint { font-weight: 400; font-size: 18px; line-height: 1.5; color: #dedee8; }

/* =========================================================
   03 PROCESS  (bg #f4f3ee) — chips row
   ========================================================= */
.case-isqod-ui .iq-chips { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; padding-top: 4px; }
.case-isqod-ui .iq-chip {
  background: #fff; border: 1px solid var(--iq-card-border); border-radius: 999px;
  padding: 10px 16px; font-weight: 600; font-size: 14px; line-height: 1; color: var(--iq-ink);
}

/* =========================================================
   04 SOLUTION  (bg #fff) — 6-step journey stepper
   ========================================================= */
.case-isqod-ui .iq-journey { display: flex; gap: 12px; width: 100%; align-items: stretch; padding-top: 10px; }
.case-isqod-ui .iq-step {
  flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--iq-card-border);
  border-radius: 16px; padding: 18px 16px 20px; box-shadow: var(--shadow-mock);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.case-isqod-ui .iq-step .no {
  background: var(--iq-chip-y); border-radius: 8px; padding: 5px 10px;
  font-weight: 800; font-size: 15px; line-height: 1; color: var(--iq-ink);
}
.case-isqod-ui .iq-step h4 { font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--iq-ink); margin: 0; }
.case-isqod-ui .iq-step p { font-weight: 400; font-size: 12.5px; line-height: 1.4; color: var(--iq-muted); margin: 0; }
.case-isqod-ui .iq-solution .iq-figbtn { margin-top: 0; }

/* =========================================================
   05 SCREENS  (bg #f4f3ee) — native wireframe mockups
   Figma "mockups" frame 1168 wide, centered; dashboard 620x400 + 2 phones 190x400.
   ========================================================= */
.case-isqod-ui .iq-mockups {
  display: flex; gap: 18px; width: 100%; align-items: flex-start; justify-content: center;
  padding-top: 14px;
}
.case-isqod-ui .iq-dash,
.case-isqod-ui .iq-phone {
  position: relative; flex: 0 0 auto; background: #fff;
  border: 1px solid var(--iq-card-border); box-shadow: var(--shadow-mock);
  overflow: hidden;
}
.case-isqod-ui .iq-dash  { width: 620px; height: 400px; border-radius: 16px; }
.case-isqod-ui .iq-phone { width: 190px; height: 400px; border-radius: 28px; }
/* .cv is the fixed-size coordinate canvas (scaled on mobile, top-left origin) */
.case-isqod-ui .iq-dash .cv  { position: relative; width: 620px; height: 400px; transform-origin: top left; }
.case-isqod-ui .iq-phone .cv { position: relative; width: 190px; height: 400px; transform-origin: top left; }
.case-isqod-ui .iq-mockups .r { position: absolute; display: block; }

/* dashboard rectangles */
.case-isqod-ui .iq-dash .ln    { background: var(--iq-line); }
.case-isqod-ui .iq-dash .logo  { background: var(--iq-grey-2); border-radius: 6px; }
.case-isqod-ui .iq-dash .pill  { background: var(--iq-chip-y); border-radius: 9px; }
.case-isqod-ui .iq-dash .side  { background: var(--iq-paper); }
.case-isqod-ui .iq-dash .nav   { background: var(--iq-grey); border-radius: 5px; }
.case-isqod-ui .iq-dash .nav.on{ background: var(--iq-green); }
.case-isqod-ui .iq-dash .card  { background: var(--iq-paper); border: 1px solid var(--iq-line); border-radius: 12px; }
.case-isqod-ui .iq-dash .cap   { background: var(--iq-grey); border-radius: 4px; }
.case-isqod-ui .iq-dash .big   { background: var(--iq-ink); border-radius: 6px; }
.case-isqod-ui .iq-dash .chart { background: var(--iq-paper); border: 1px solid var(--iq-line); border-radius: 12px; }
.case-isqod-ui .iq-dash .bar   { background: var(--iq-yellow-bar); border-radius: 6px; }

/* phone rectangles */
.case-isqod-ui .iq-phone .notch { background: var(--iq-card-border); border-radius: 3px; }
.case-isqod-ui .iq-phone .title { background: var(--iq-grey-2); border-radius: 6px; }
.case-isqod-ui .iq-phone .row   { background: var(--iq-paper); border: 1px solid var(--iq-line); border-radius: 12px; }
.case-isqod-ui .iq-phone .l1    { background: var(--iq-grey); border-radius: 4px; }
.case-isqod-ui .iq-phone .l2    { background: var(--iq-grey-3); border-radius: 4px; }
.case-isqod-ui .iq-phone .thumb { background: var(--iq-mint-2); border-radius: 7px; }
.case-isqod-ui .iq-phone .cta   { background: var(--iq-yellow-bar); border-radius: 12px; }

/* =========================================================
   06 OUTCOME  (bg #fff) — check cards
   ========================================================= */
.case-isqod-ui .iq-check {
  width: 100%; background: #fff; border: 1px solid var(--iq-card-border); border-radius: 16px;
  padding: 24px 26px; box-shadow: var(--shadow-mock);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.case-isqod-ui .iq-check .ck {
  background: var(--iq-mint); color: var(--iq-green); border-radius: 8px;
  padding: 4px 9px; font-weight: 600; font-size: 13px; line-height: 1;
}
.case-isqod-ui .iq-check h4 { font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--iq-ink); margin: 0; }
.case-isqod-ui .iq-check p  { font-weight: 400; font-size: 15px; line-height: 1.48; color: var(--iq-muted); margin: 0; }
.case-isqod-ui .iq-outcome .iq-figbtn { margin-top: 0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  /* the full 620 + 190 + 190 + 2*18 = 1036 row no longer fits the content box,
     so reflow: dashboard on its own row (full width, scaled), phones share a row below.
     height:0 + padding-bottom keeps the box height proportional to its scaled canvas. */
  .case-isqod-ui .iq-mockups { flex-wrap: wrap; }
  .case-isqod-ui .iq-dash {
    width: 100%; max-width: 620px; height: 0;
    padding-bottom: calc(400 / 620 * 100%); position: relative; flex: 1 1 100%;
  }
  .case-isqod-ui .iq-dash .cv { position: absolute; top: 0; left: 0; }
}
@media (max-width: 1024px){
  .case-isqod-ui .iq-hero h1 { font-size: 46px; letter-spacing: -.9px; }
  .case-isqod-ui .iq-h2 { font-size: 30px; }
  /* journey: 6 -> 3 across, two rows */
  .case-isqod-ui .iq-journey { flex-wrap: wrap; }
  .case-isqod-ui .iq-step { flex: 1 1 calc(33.333% - 8px); min-width: 150px; }
  /* dashboard band has pad=40 each side here → content width = 100vw - 80px */
  .case-isqod-ui .iq-dash .cv { transform: scale(min(calc((100vw - 80px) / 620px), 1)); }
}
@media (max-width: 860px){
  .case-isqod-ui .iq-stats { grid-template-columns: 1fr; }
  /* decorative hero rings overflow + clutter on small screens — hide */
  .case-isqod-ui .iq-hero-blob { display: none; }
  .case-isqod-ui .iq-stats .stat { border-right: none; border-bottom: 1.2px solid #2a2a34; }
  .case-isqod-ui .iq-stats .stat:last-child { border-bottom: none; }
  .case-isqod-ui .iq-hero h1 { font-size: 40px; }
  /* journey: 2 across */
  .case-isqod-ui .iq-step { flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 620px){
  .case-isqod-ui .iq-pad { padding-block: 56px; }
  .case-isqod-ui .iq-hero { padding-block: 56px 32px; }
  /* journey stack to single column */
  .case-isqod-ui .iq-step { flex: 1 1 100%; }
  /* phones stack vertically, centered */
  .case-isqod-ui .iq-phone { flex: 1 1 100%; max-width: 190px; }
}
@media (max-width: 520px){
  .case-isqod-ui .iq-hero h1 { font-size: 32px; letter-spacing: -.6px; }
  .case-isqod-ui .iq-h2 { font-size: 26px; }
  .case-isqod-ui .iq-hero-sub, .case-isqod-ui .iq-intro { font-size: 16px; }
  /* dashboard band has pad=20 each side here → content width = 100vw - 40px */
  .case-isqod-ui .iq-dash .cv { transform: scale(calc((100vw - 40px) / 620px)); }
}