/* ============================================================
   neomax — design system
   ============================================================ */
   :root{
    /* brand */
    --brand:        #1f6dff;
    --brand-strong: #0b46c2;
    --brand-ink:    #0a2540;
  
    /* light theme */
    --bg:           #ffffff;
    --bg-alt:       #f5f8fc;
    --surface:      #ffffff;
    --surface-2:    #f0f4fa;
    --text:         #0a1b33;
    --text-soft:    #5a6b85;
    --border:       #e4eaf3;
    --pill-bg:      rgba(15, 35, 70, .05);
    --pill-bg-hover:rgba(15, 35, 70, .10);
    --shadow:       0 18px 50px -24px rgba(13, 38, 84, .28);
    --shadow-sm:    0 8px 24px -16px rgba(13, 38, 84, .35);
    /* frosted-glass chips (Yandex-style header on scroll) */
    --glass:        rgba(255, 255, 255, .62);
    --glass-strong: rgba(255, 255, 255, .88);
    --glass-bd:     rgba(15, 35, 70, .08);
  
    /* radar zones */
    --z-adopt:  #6c8bff;
    --z-trial:  #f4a261;
    --z-assess: #d98fe0;
    --z-hold:   #9b8bff;
  
    /* unified radius scale (rounded rectangles); pills use 999px, circles 50% */
    --radius-xs: 6px;   /* inputs, tags, chips, small controls */
    --radius-sm: 10px;  /* buttons-as-rect, small cards, accordions */
    --radius:    14px;  /* default: cards, panels, modals, hero visuals */
    --maxw:      100%;
    --gutter:    clamp(20px, 4.5vw, 80px);
    --ease:      cubic-bezier(.22,.61,.36,1);
    --t:         .35s var(--ease);
    --header-h:  80px;
  
    --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }
  
  [data-theme="dark"]{
    --bg:           #0a0e17;
    --bg-alt:       #0e131f;
    --surface:      #131a28;
    --surface-2:    #1a2334;
    --text:         #eef3fb;
    --text-soft:    #93a1ba;
    --border:       #232d40;
    --pill-bg:      rgba(255,255,255,.06);
    --pill-bg-hover:rgba(255,255,255,.12);
    --shadow:       0 24px 60px -28px rgba(0,0,0,.7);
    --shadow-sm:    0 10px 30px -18px rgba(0,0,0,.8);
    --glass:        rgba(24, 32, 48, .55);
    --glass-strong: rgba(40, 52, 74, .82);
    --glass-bd:     rgba(255, 255, 255, .10);
    --brand:        #4d8bff;
  }
  
  /* ============ base ============ */
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  /* kill the mobile tap-flash square on every interactive control (MIUI/Android) */
  a, button, input, textarea, select, label, summary, [role="button"], [tabindex]{
    -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none;
  }
  /* No global smooth-scroll: it animated Back/Forward scroll restoration (esp. the
     mobile back gesture). Anchor links are smooth-scrolled via JS instead. */
  html{ scroll-padding-top:90px; overflow-y:scroll; background:var(--bg); color-scheme:light; }
  [data-theme="dark"]{ color-scheme:dark; }
  body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background .4s var(--ease), color .4s var(--ease);
    overflow-x:clip;
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  svg{ display:block; }
  .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
  
  /* ============ buttons ============ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:15px;
    cursor:pointer; border:1px solid transparent; white-space:nowrap;
    transition:transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t), color var(--t);
  }
  .btn--lg{ padding:15px 28px; font-size:16px; }
  .btn--primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
  .btn--primary:hover{ background:var(--brand-strong); transform:translateY(-2px); }
  .btn--ghost{ background:transparent; color:var(--text); border-color:var(--border); }
  .btn--ghost:hover{ background:var(--pill-bg-hover); transform:translateY(-2px); }
  /* frosted-glass button (Telegram / iOS style): semi-transparent dark tint + blur of what's behind,
     a faint 1px glass edge. Smooth rounded corners (inherits the .btn radius). */
  .btn--glass{ background:rgba(28, 34, 46, 0.75); color:#fff;
    -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(255, 255, 255, 0.07);
    box-shadow:0 8px 28px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); }
  .btn--glass:hover{ background:rgba(40, 48, 64, 0.82); border-color:rgba(255,255,255,.22); transform:translateY(-2px); }
  
  /* ============ header ============ */
  .header{
    position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
    display:flex; align-items:center;
    background:color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter:saturate(180%) blur(16px);
    border-bottom:1px solid transparent;
    transition:background var(--t), border-color var(--t), box-shadow var(--t);
  }
  .header.is-scrolled{ border-color:color-mix(in srgb, var(--border) 18%, transparent); box-shadow:var(--shadow-sm); }
  .header__inner{ display:flex; align-items:center; gap:24px; }
  
  .logo{ display:inline-flex; align-items:center; line-height:0; }
  .logo__img{ height:30px; width:auto; transition:filter var(--t); }
  .logo--footer .logo__img{ height:27px; }
  /* footer logo: black in light theme, white in dark theme */
  .logo--footer img{ height:27px; width:auto; filter:brightness(0); transition:filter var(--t); }
  [data-theme="dark"] .logo--footer img{ filter:brightness(0) invert(1); }
  /* lift the deep-blue half of the mark on dark backgrounds */
  [data-theme="dark"] .logo__img{ filter:brightness(1.35) saturate(1.1); }
  
  /* nav pills — Yandex style */
  .nav{ display:flex; gap:6px; margin-left:80px; margin-right:auto; }
  .nav__pill{
    padding:10px 12px; border-radius:var(--radius-sm); font-weight:600; font-size:16px; color:var(--text-soft);
    background:transparent; transition:background var(--t), color var(--t), transform var(--t);
  }
  .nav__pill:hover{ background:var(--pill-bg); color:var(--text); }
  .nav__pill.is-active{ background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); font-weight:700; }
  
  .header__actions{ display:flex; align-items:center; gap:12px; }
  .cta-desktop{ padding:10px 20px; font-size:14px; }
  
  /* lang */
  .lang{
    position:relative;
    display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
    background:transparent; border:1px solid transparent; color:var(--text-soft); font:inherit; font-weight:600; font-size:14px; cursor:pointer;
    transition:background var(--t), color var(--t), border-color var(--t);
  }
  .lang:hover, .lang[aria-expanded="true"]{ background:var(--pill-bg); color:var(--text); border-color:var(--border); }
  .lang .icon{ width:18px; height:18px; }
  .lang__chev{ width:13px; height:13px; margin-left:-2px; opacity:.6; fill:none; stroke:currentColor;
    stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease); }
  .lang[aria-expanded="true"] .lang__chev{ transform:rotate(180deg); }
  /* language dropdown — modern blurred popover */
  .lang-wrap{ position:relative; display:inline-flex; }
  .lang-menu{ position:absolute; top:calc(100% + 10px); right:0; min-width:116px; z-index:120;
    background:color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
    border:1px solid var(--border); border-radius:13px; padding:6px;
    box-shadow:0 20px 50px -18px rgba(0,0,0,.55), 0 2px 8px -4px rgba(0,0,0,.3);
    display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:top right;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
  .lang-menu.is-open{ opacity:1; visibility:visible; transform:none; }
  .lang-menu__item{ display:flex; align-items:center; justify-content:space-between; gap:14px; border:none; background:transparent; font:inherit; font-weight:700; font-size:14px;
    color:var(--text); padding:8px 13px; border-radius:10px; cursor:pointer; text-align:left; text-decoration:none;
    transition:background var(--t), color var(--t); }
  .lang-menu__code{ letter-spacing:.5px; }
  .lang-menu__check{ flex:none; width:16px; height:16px; opacity:0; fill:none; stroke:var(--brand);
    stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:opacity var(--t); }
  .lang-menu__item:hover{ background:var(--pill-bg); }
  .lang-menu__item.is-active{ background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
  .lang-menu__item.is-active .lang-menu__check{ opacity:1; }
  /* compact language switcher — sits at the top of the mobile menu */
  .mlang{ display:flex; justify-content:flex-start; width:100%; max-width:440px; }
  .mlang__row{ display:inline-flex; gap:4px; padding:4px; background:var(--surface);
    border:1px solid var(--border); border-radius:999px; }
  .mlang__item{ min-width:48px; padding:7px 6px; border-radius:999px; text-align:center; text-decoration:none;
    color:var(--text-soft); font:inherit; font-weight:700; font-size:13px; letter-spacing:.4px;
    transition:background var(--t), color var(--t); }
  .mlang__item:hover{ color:var(--text); }
  .mlang__item.is-active{ background:var(--brand); color:#fff; }
  .icon{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  
  /* theme toggle — Beeline style: rolling thumb, moon↔sun, yellow glow on hover */
  .theme-toggle{ background:none; border:none; cursor:pointer; padding:0; line-height:0; }
  .theme-toggle__track{ position:relative; display:block; width:45px; height:21px; border-radius:999px;
    background:#000; border:1px solid transparent;
    transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
  [data-theme="dark"] .theme-toggle__track{ background:#fff; }
  /* neon glow only on real-pointer devices — on touch screens :hover sticks after a
     tap, leaving the glow around the toggle after the theme is chosen */
  @media (hover:hover){
    .theme-toggle:hover .theme-toggle__track{ box-shadow:0 0 18px 1px rgba(64,124,255,.7), 0 0 5px rgba(64,124,255,.55);
      border-color:rgba(64,124,255,.8); }
    /* light theme: sun-yellow neon instead of blue */
    [data-theme="light"] .theme-toggle:hover .theme-toggle__track{ box-shadow:0 0 18px 1px rgba(254,200,10,.7), 0 0 5px rgba(254,200,10,.55);
      border-color:rgba(254,200,10,.8); }
  }
  .theme-toggle__thumb{ position:absolute; top:50%; left:3px; width:19px; height:19px; border-radius:50%; background:none;
    display:grid; place-items:center;
    transform:translateY(-50%); transition:transform .42s cubic-bezier(.65,.05,.25,1); }
  [data-theme="light"] .theme-toggle__thumb{ transform:translate(21px,-50%); }
  .theme-toggle .icon{ grid-area:1/1; width:15px; height:15px; display:block; transition:opacity .3s var(--ease), transform .4s var(--ease); }
  .icon--moon{ fill:#0e1830; stroke:none; }
  .icon--sun{ fill:#fec80a; stroke:#fec80a; }
  [data-theme="dark"] .icon--moon{ opacity:1; transform:scale(1) rotate(0); }
  [data-theme="dark"] .icon--sun{ opacity:0; transform:scale(.3) rotate(-90deg); }
  [data-theme="light"] .icon--moon{ opacity:0; transform:scale(.3) rotate(90deg); }
  [data-theme="light"] .icon--sun{ opacity:1; transform:scale(1) rotate(0); }
  
  /* burger */
  .burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center;
    background:var(--pill-bg); border:none; border-radius:var(--radius-sm); cursor:pointer; }
  .burger span{ width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ opacity:0; }
  .burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  
  /* mobile menu — full-screen overlay, editorial nav with staggered reveal */
  .mobile-menu{
    position:fixed; inset:0; z-index:90;
    background:
      radial-gradient(130% 90% at 50% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%),
      color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    backdrop-filter:saturate(140%) blur(8px);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px;
    padding:calc(var(--header-h) + 18px) 22px 34px; opacity:0; visibility:hidden; transform:translateY(-12px);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  
  .mobile-menu__nav{ display:flex; flex-direction:column; gap:2px; width:100%; max-width:440px; margin-top:18px; }
  .nav__pill--lg{
    display:block; padding:13px 2px; line-height:1.15; text-align:left;
    font-size:clamp(24px, 7vw, 28px); font-weight:600; color:var(--text); background:transparent;
    transition:color var(--t);
  }
  .nav__pill--lg:hover, .nav__pill--lg.is-active{ color:var(--brand); }
  
  /* staggered reveal when the menu opens */
  .mobile-menu.is-open .nav__pill--lg{ animation:menuItemIn .5s var(--ease) both; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(1){ animation-delay:.05s; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(2){ animation-delay:.10s; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(3){ animation-delay:.15s; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(4){ animation-delay:.20s; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(5){ animation-delay:.25s; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(6){ animation-delay:.30s; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(7){ animation-delay:.35s; }
  .mobile-menu.is-open .nav__pill--lg:nth-child(8){ animation-delay:.40s; }
  @keyframes menuItemIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  
  .mobile-menu__cta{ width:100%; max-width:440px; margin-top:22px; }
  
  /* ============ hero ============ */
  .hero{ padding-top:calc(var(--header-h) + 80px); padding-bottom:60px; position:relative; }
  .hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px; }
  .hero__badge{ display:inline-block; padding:7px 14px; border-radius:999px; background:var(--pill-bg);
    color:var(--text-soft); font-weight:600; font-size:13px; margin-bottom:22px; }
  .hero__title{ font-size:clamp(34px, 5vw, 60px); line-height:1.05; font-weight:800; letter-spacing:-1.5px; }
  .grad-text{ background:linear-gradient(120deg, var(--brand), #7aa2ff 60%, var(--z-assess)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero__lead{ margin-top:22px; font-size:clamp(16px,2vw,19px); color:var(--text-soft); max-width:520px; }
  .hero__actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
  .hero__stats{ display:flex; gap:36px; margin-top:46px; flex-wrap:wrap; }
  .stat b{ display:block; font-size:30px; font-weight:800; color:var(--brand); line-height:1; }
  .stat span{ font-size:14px; color:var(--text-soft); }
  
  /* hero orb */
  .hero__visual{ display:grid; place-items:center; }
  /* glowing tech circle + floating badges */
  .techcircle{ position:relative; width:min(470px, 92vw); aspect-ratio:1; }
  .techcircle__glow{ position:absolute; top:50%; left:50%; width:120%; height:120%; transform:translate(-50%,-50%);
    border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--brand) 28%, transparent) 0%, transparent 70%);
    animation:tc-pulse 3.4s ease-in-out infinite; }
  .techcircle__ring{ position:absolute; inset:0; border-radius:50%; border:4px solid var(--brand); overflow:hidden;
    background:var(--surface); display:grid; place-items:center;
    box-shadow:0 0 40px -6px color-mix(in srgb, var(--brand) 50%, transparent), inset 0 0 70px -24px color-mix(in srgb, var(--brand) 70%, transparent); }
  .techcircle__code{ color:var(--brand); opacity:.32; }
  .techcircle__code svg{ width:138px; height:138px; }
  @keyframes tc-pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.55; } 50%{ transform:translate(-50%,-50%) scale(1.1); opacity:.85; } }
  
  .tech-badge{ position:absolute; z-index:2; display:flex; align-items:center; gap:12px; min-width:190px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 18px;
    box-shadow:var(--shadow); white-space:nowrap; animation:tc-float 3.2s ease-in-out infinite;
    transition:opacity .75s var(--ease), border-color var(--t), box-shadow var(--t); }
  .tech-badge.is-swapping{ opacity:0; }
  .tech-badge:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
  .tech-badge > i{ font-size:32px; line-height:1; flex:none; width:38px; text-align:center; }
  .tech-badge__ic{ width:38px; height:38px; border-radius:var(--radius-sm); flex:none; display:grid; place-items:center;
    background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand); }
  .tech-badge__ic svg{ width:22px; height:22px; }
  .tech-badge__txt b{ display:block; font-size:15px; font-weight:800; color:var(--text); }
  .tech-badge__txt span{ font-size:12px; color:var(--text-soft); }
  .tech-badge--1{ top:10%;   right:-9%;  animation-delay:0s; }
  .tech-badge--2{ bottom:14%; right:-13%; animation-delay:1.1s; }
  .tech-badge--3{ top:48%;   left:-15%;  animation-delay:2.2s; }
  @keyframes tc-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
  
  /* ============ sections ============ */
  .section{ padding:64px 0; }
  .section--alt{ background:var(--bg-alt); }
  .section__head{ max-width:720px; margin-bottom:40px; }
  .section__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; }
  .eyebrow{ font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); }
  .section__title{ font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-1px; margin-top:10px; line-height:1.12; }
  .section__sub{ margin-top:14px; color:var(--text-soft); font-size:17px; }
  
  /* legal / prose pages (privacy, terms) */
  .legal{ max-width:860px; }
  .legal__meta{ color:var(--text-soft); font-size:14px; margin:-18px 0 26px; }
  .legal__intro{ color:var(--text-soft); font-size:17px; line-height:1.75; }
  .legal h2{ font-size:21px; font-weight:800; letter-spacing:-.3px; margin:36px 0 12px; }
  .legal p{ color:var(--text-soft); font-size:16px; line-height:1.75; margin:10px 0; }
  .legal ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:14px 0; padding:0; }
  .legal li{ position:relative; padding-left:26px; color:var(--text-soft); font-size:16px; line-height:1.65; }
  .legal li::before{ content:""; position:absolute; left:5px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
  .legal strong{ color:var(--text); font-weight:700; }
  .legal a{ color:var(--brand); }
  
  /* ============ cards ============ */
  .cards{ display:grid; gap:20px; }
  .cards--services{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
  .home-svc-mobile{ display:none; }   /* mobile-only homepage services block */
  .home-svc-mobile .reveal{ opacity:1; transform:none; }   /* always visible — no scroll-reveal flicker */
  .cards--projects{ grid-template-columns:repeat(3,1fr); }
  
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;
    transition:transform var(--t), box-shadow var(--t), border-color var(--t); position:relative; overflow:hidden;
  }
  .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--brand) 40%, var(--border)); }
  .card__icon{ width:48px; height:48px; border-radius:var(--radius); display:grid; place-items:center; margin-bottom:18px;
    background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
  .card__icon .icon{ width:24px; height:24px; }
  .card__title{ font-size:18px; font-weight:700; }
  .card__text{ margin-top:8px; color:var(--text-soft); font-size:14px; }
  .card__arrow{ margin-top:18px; color:var(--brand); font-weight:700; opacity:0; transform:translateX(-6px); transition:opacity var(--t), transform var(--t); }
  .card:hover .card__arrow{ opacity:1; transform:translateX(0); }
  
  /* service card — clean card; 3D object peeks from bottom-right corner */
  .scard{ position:relative; overflow:hidden; min-height:158px; padding:26px 28px;
    display:flex; flex-direction:column; justify-content:center;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 16px 40px -18px transparent; transition:transform .38s var(--ease), box-shadow .4s var(--ease), border-color .35s var(--ease); }
  .scard::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(130% 130% at 100% 100%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 58%);
    opacity:0; transition:opacity .45s var(--ease); }
  .scard:hover{ transform:translateY(-7px); box-shadow:0 24px 54px -16px color-mix(in srgb, var(--brand) 42%, transparent); border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
  .scard:hover::after{ opacity:1; }
  .scard:hover .scard__title{ color:var(--brand); }
  .scard__body{ position:relative; z-index:2; max-width:62%; }
  .scard__title{ font-size:19px; font-weight:800; line-height:1.2; transition:color var(--t); }
  .scard__text{ margin-top:8px; color:var(--text-soft); font-size:14px; line-height:1.5; }
  .scard__art{ position:absolute; right:0; bottom:0; top:0; width:44%; z-index:1; pointer-events:none; }
  .scard__art .icon{ position:absolute; right:24px; bottom:22px; width:64px; height:64px; color:var(--brand); opacity:.92;
    filter:drop-shadow(0 8px 16px color-mix(in srgb, var(--brand) 32%, transparent)); transition:transform var(--t); }
  .scard__art:has(.scard__img) .icon{ display:none; }
  .scard__img{ position:absolute; right:-42px; bottom:-48px; width:200px; height:200px; object-fit:contain; object-position:right bottom; z-index:2;
    filter:drop-shadow(0 16px 22px rgba(15,30,60,.3)); transition:transform var(--t); }
  .scard:hover .scard__art .icon, .scard:hover .scard__img{ transform:translateY(-6px) scale(1.04); }
  
  /* project card */
  .pcard{ padding:0; display:flex; flex-direction:column; }
  .pcard__media{ aspect-ratio:16/10; display:grid; place-items:center; font-size:26px; font-weight:800; letter-spacing:1px; color:#fff; }
  .pcard__body{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
  .pcard__tag{ color:var(--brand); font-weight:700; font-size:13px; }
  .pcard__title{ font-size:20px; font-weight:800; margin-top:4px; }
  .pcard__text{ color:var(--text-soft); font-size:14px; margin-top:8px; }
  /* "open case" affordance — corner arrow (always visible) + image zoom + title shift on hover */
  .pcard__open{ margin-top:auto; padding-top:16px; align-self:flex-end; color:var(--text-soft);
    transition:transform var(--t), color var(--t); }
  .pcard__open svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; display:block; }
  .pcard__media img{ transition:transform .45s var(--ease); }
  @media (hover:hover){
    .pcard:hover .pcard__media img{ transform:scale(1.05); }
    .pcard:hover .pcard__open{ color:var(--text); transform:translate(3px,-3px); }
  }
  .pcard__title{ transition:color var(--t); }
  /* cover badge (admin "Note" field) — pill label on the project cover image */
  .cover-badge{ position:absolute; left:10px; bottom:10px; z-index:3; max-width:calc(100% - 20px);
    padding:7px 14px; border-radius:999px; background:#0b0f1a; color:#fff;
    font-weight:700; font-size:13px; letter-spacing:.2px; line-height:1.2; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; box-shadow:0 8px 20px -8px rgba(0,0,0,.55); }
  
  /* ============ radar ============ */
  .radar-layout{ display:grid; grid-template-columns:minmax(320px,400px) 1fr; gap:40px; align-items:start; }
  
  /* left: search */
  .radar-search{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:var(--radius-sm);
    background:var(--surface); border:1px solid var(--border); margin-bottom:14px; transition:border-color var(--t); }
  .radar-search:focus-within{ border-color:var(--brand); }
  .radar-search .icon{ width:18px; height:18px; color:var(--text-soft); flex:none; }
  .radar-search input{ border:none; background:none; outline:none; font:inherit; font-size:15px; color:var(--text); width:100%; }
  .radar-search input::placeholder{ color:var(--text-soft); }
  
  /* left: expandable accordion */
  .radar-acc{ display:flex; flex-direction:column; gap:8px; }
  .acc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
    transition:border-color var(--t), background var(--t); }
  .acc.is-open{ border-color:color-mix(in srgb, var(--brand) 35%, var(--border)); }
  .acc__head{ width:100%; display:flex; gap:14px; align-items:flex-start; padding:18px; background:none; border:none;
    color:var(--text); font:inherit; font-weight:700; font-size:16px; line-height:1.3; cursor:pointer; text-align:left; }
  .acc__num{ color:var(--text-soft); font-weight:800; font-size:13px; padding-top:3px; flex:none; }
  .acc.is-open .acc__num{ color:var(--brand); }
  .acc__name{ flex:1; }
  .acc__chevron{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--text-soft); transition:transform var(--t); }
  .acc.is-open .acc__chevron{ transform:rotate(180deg); }
  .acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
  .acc.is-open .acc__panel{ grid-template-rows:1fr; }
  .acc__inner{ overflow:hidden; }
  .acc__groups{ padding:0 18px 18px 46px; display:flex; flex-direction:column; gap:16px; }
  .acc__group{ display:flex; flex-direction:column; gap:8px; }
  .acc__badge{ align-self:flex-start; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.5px; color:#fff; }
  .acc__badge--adopt{ background:var(--z-adopt); } .acc__badge--trial{ background:var(--z-trial); }
  .acc__badge--assess{ background:var(--z-assess); } .acc__badge--hold{ background:var(--z-hold); }
  .acc__items{ list-style:none; display:flex; flex-direction:column; }
  .acc__item{ padding:7px 0; font-size:15px; color:var(--text-soft); transition:color var(--t), padding var(--t); cursor:default; }
  .acc__item:hover{ color:var(--text); padding-left:5px; }
  .acc__item.is-hidden{ display:none; }
  .acc__empty{ font-size:14px; color:var(--text-soft); padding:4px 0; }
  
  /* desktop: one tall panel matching the radar height, categories split it evenly */
  @media (min-width:981px){
    .radar-cats{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); overflow:hidden; }
    .radar-search{ margin:0; border:none; border-radius:0; background:none; border-bottom:1px solid var(--border); padding:18px 20px; }
    .radar-acc{ flex:1; gap:0; min-height:0; }
    .acc{ display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden;
      border:none; border-radius:0; background:none; border-bottom:1px solid var(--border);
      transition:flex-grow .45s var(--ease), background var(--t); }
    .acc:last-child{ border-bottom:none; }
    .acc__head{ flex:none; padding:22px 24px; font-size:20px; font-weight:800; }
    .acc__num{ font-size:15px; }
    .acc.is-open{ background:color-mix(in srgb, var(--brand) 6%, var(--surface)); }
    .radar-acc:has(.acc.is-open) .acc:not(.is-open){ flex:0 0 auto; }
    .radar-acc:has(.acc.is-open) .acc.is-open{ flex:1 1 auto; }
    /* panel becomes a flex scroller (overrides the mobile grid-rows animation) */
    .acc__panel{ display:block; flex:1 1 auto; min-height:0; grid-template-rows:none; }
    .acc:not(.is-open) .acc__panel{ display:none; }
    .acc__inner{ height:100%; overflow-y:auto; }
    .acc__groups{ padding:14px 24px 22px 50px; opacity:0; transition:opacity .3s var(--ease) .1s; }
    .acc.is-open .acc__groups{ opacity:1; }
  }
  
  /* right: zoomed radar stage — width fixed, height set to match (JS), with aspect-ratio fallback */
  .radar-stage{ position:relative; width:min(600px, 100%); aspect-ratio:1; margin-inline:auto; overflow:hidden;
    transform:translateX(34px);
    border-radius:var(--radius);
    background:radial-gradient(circle at 72% 72%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%), var(--bg-alt); }
  /* default = full radar; .z1–.z4 zoom into a quadrant by scaling toward its far corner */
  .radar{ position:absolute; inset:4%; transform-origin:center;
    transition:transform .7s var(--ease), transform-origin .7s var(--ease); }
  .radar.z1{ transform:scale(1.8); transform-origin:0% 0%; }
  .radar.z2{ transform:scale(1.8); transform-origin:100% 0%; }
  .radar.z3{ transform:scale(1.8); transform-origin:0% 100%; }
  .radar.z4{ transform:scale(1.8); transform-origin:100% 100%; }
  
  /* field holds rings + dots and gets clipped to the active quadrant */
  .radar__field{ position:absolute; inset:0; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition:clip-path .7s var(--ease); }
  .radar.z1 .radar__field{ clip-path:polygon(0 0, 50% 0, 50% 50%, 0 50%); }
  .radar.z2 .radar__field{ clip-path:polygon(50% 0, 100% 0, 100% 50%, 50% 50%); }
  .radar.z3 .radar__field{ clip-path:polygon(0 50%, 50% 50%, 50% 100%, 0 100%); }
  .radar.z4 .radar__field{ clip-path:polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); }
  
  .radar__ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--border); }
  .radar__ring--4{ inset:0;     border-color:var(--z-hold); }
  .radar__ring--3{ inset:12.5%; border-color:var(--z-assess); }
  .radar__ring--2{ inset:25%;   border-color:var(--z-trial); }
  .radar__ring--1{ inset:37.5%; border-color:var(--z-adopt); background:color-mix(in srgb, var(--z-adopt) 8%, transparent); }
  
  /* labels layer — not clipped; positioned on each ring's axis crossing */
  .radar__labels{ position:absolute; inset:0; pointer-events:none; }
  .radar__label{ position:absolute; left:50%; transform:translate(-50%,-50%); white-space:nowrap;
    font-size:11px; font-weight:800; letter-spacing:1px; padding:4px 11px; border-radius:999px; color:#fff; }
  .l4t{ top:0; }     .l4b{ top:100%; }
  .l3t{ top:12.5%; } .l3b{ top:87.5%; }
  .l2t{ top:25%; }   .l2b{ top:75%; }
  .l1t{ top:37.5%; } .l1b{ top:62.5%; }
  .b-hold{ background:var(--z-hold); } .b-assess{ background:var(--z-assess); }
  .b-trial{ background:var(--z-trial); } .b-adopt{ background:var(--z-adopt); }
  /* bottom quadrants → show the lower labels instead of the top ones */
  .radar__label--bot{ display:none; }
  .radar.z3 .radar__label--top, .radar.z4 .radar__label--top{ display:none; }
  .radar.z3 .radar__label--bot, .radar.z4 .radar__label--bot{ display:block; }
  .radar__quad{ position:absolute; font-size:22px; font-weight:800; color:var(--text-soft); opacity:.4; }
  .radar__quad--tl{ top:3%; left:3%; } .radar__quad--tr{ top:3%; right:3%; }
  .radar__quad--bl{ bottom:3%; left:3%; } .radar__quad--br{ bottom:3%; right:3%; }
  .radar::before, .radar::after{ content:""; position:absolute; }
  .radar::before{ left:50%; top:0; bottom:0; border-left:1px dashed var(--border); transform:translateX(-.5px); }
  .radar::after{ top:50%; left:0; right:0; border-top:1px dashed var(--border); transform:translateY(-.5px); }
  
  .radar__dots{ position:absolute; inset:0; }
  .radar__dot{ position:absolute; width:14px; height:14px; border-radius:50%; cursor:pointer;
    transform:translate(-50%,-50%) scale(0); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease), box-shadow var(--t);
    left:var(--x); top:var(--y); border:2px solid var(--bg-alt); }
  .radar__dot.is-shown{ transform:translate(-50%,-50%) scale(1); opacity:1; transition-delay:var(--delay); }
  .radar__dot.is-dim{ opacity:.12 !important; }
  /* hovering a dot dims all the others */
  .radar__dots.is-peek .radar__dot.is-shown:not(.is-focus){ opacity:.15; }
  .radar__dot.is-focus{ z-index:4; }
  .radar__dot:hover{ box-shadow:0 0 0 6px color-mix(in srgb, currentColor 25%, transparent); z-index:3; }
  .radar__dot--adopt{ background:var(--z-adopt); color:var(--z-adopt); }
  .radar__dot--trial{ background:var(--z-trial); color:var(--z-trial); }
  .radar__dot--assess{ background:var(--z-assess); color:var(--z-assess); }
  .radar__dot--hold{ background:var(--z-hold); color:var(--z-hold); }
  .radar__tooltip{ position:absolute; pointer-events:none; padding:6px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
    background:var(--text); color:var(--bg); opacity:0; transform:translate(-50%,-8px); transition:opacity .2s, transform .2s; white-space:nowrap; z-index:5; left:var(--tx); top:var(--ty); }
  .radar__tooltip.is-shown{ opacity:1; transform:translate(-50%,-12px); }
  
  /* dot highlighted from list hover / open popover */
  .radar__dot.is-hl.is-shown{ transform:translate(-50%,-50%) scale(1.7);
    box-shadow:0 0 0 7px color-mix(in srgb, currentColor 30%, transparent); z-index:4; }
  .acc__item.is-active{ color:var(--text); font-weight:700; }
  
  /* tech detail popover */
  .pop-backdrop{ position:fixed; inset:0; z-index:190; background:transparent; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; }
  .pop-backdrop.is-open{ opacity:1; visibility:visible; }
  .tech-pop{ position:fixed; z-index:200; width:288px; max-width:calc(100vw - 32px);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(6px) scale(.98); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
  .tech-pop.is-open{ opacity:1; visibility:visible; transform:none; }
  .tech-pop__close{ position:absolute; top:14px; right:14px; width:28px; height:28px; border:none; border-radius:var(--radius-xs);
    background:var(--pill-bg); color:var(--text); cursor:pointer; font-size:16px; line-height:1; transition:background var(--t); }
  .tech-pop__close:hover{ background:var(--pill-bg-hover); }
  .tech-pop__title{ font-size:20px; font-weight:800; padding-right:32px; line-height:1.2; }
  .tech-pop__ring{ display:inline-block; margin-top:10px; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.5px; color:#fff; }
  .tech-pop__ring--adopt{ background:var(--z-adopt); } .tech-pop__ring--trial{ background:var(--z-trial); }
  .tech-pop__ring--assess{ background:var(--z-assess); } .tech-pop__ring--hold{ background:var(--z-hold); }
  .tech-pop__desc{ margin-top:14px; color:var(--text-soft); font-size:14px; line-height:1.55; }
  @media (max-width:680px){
    .pop-backdrop{ background:rgba(0,0,0,.5); pointer-events:auto; }
    .tech-pop{ left:16px !important; right:16px; top:auto !important; bottom:16px; width:auto; transform:translateY(10px); }
    .tech-pop.is-open{ transform:none; }
  }
  
  /* ============ marquee ============ */
  .marquee{ overflow-x:auto; overflow-y:hidden; padding:12px 0; margin-top:34px;
    cursor:grab; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
  .marquee::-webkit-scrollbar{ display:none; }
  .marquee.is-grab{ cursor:grabbing; }
  .marquee__track{ display:flex; gap:20px; width:max-content; }
  .marquee__track img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
  /* colored company logo chips */
  .logo-chip{ display:flex; align-items:center; gap:12px; padding:12px 22px 12px 14px; border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--border); white-space:nowrap; cursor:pointer;
    transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
  .logo-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm);
    border-color:color-mix(in srgb, var(--c) 55%, var(--border)); }
  .logo-chip__mark{ width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center; color:#fff; flex:none;
    background:linear-gradient(135deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
    box-shadow:0 8px 18px -7px var(--c); }
  .logo-chip__mark .icon{ width:21px; height:21px; }
  .logo-chip__name{ font-size:18px; font-weight:800; letter-spacing:-.3px; color:var(--c); }
  @keyframes marquee{ to{ transform:translateX(-50%); } }
  /* partner logo chips (marquee) */
  .partner-logo{ flex:none; width:180px; height:92px; display:grid; place-items:center; background:#fff;
    border:1px solid var(--border); border-radius:var(--radius-sm); transition:transform var(--t), box-shadow var(--t); }
  .partner-logo img{ max-height:50px; max-width:74%; width:auto; object-fit:contain; display:block; }
  /* laliga = white text + colour icon baked on a BLACK background → invert so the bg flips to white
     (blends with the chip) and the text becomes black; hue-rotate keeps the icon colours sane */
  .partner-logo--flip img{ filter:invert(1) hue-rotate(180deg); }
  @media (hover:hover){
    .partner-logo:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
  }
  /* White chip in BOTH themes — logos keep their natural colours on white.
     Dark/monochrome logos read black (no filter); colour logos (incl. FLO --keep) keep colour;
     --flip (laliga) is forced black above. No theme-based inversion. */
  [data-theme="dark"] .partner-logo{ border-color:var(--border); }
  
  /* ============ blog / page grid ============ */
  .blog-grid, .page-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  /* listing page-head clears the fixed header itself, so drop the wrapping
     section's top padding — otherwise they stack into a huge gap under the header */
  .section:has(.page-head){ padding-top:0; }
  .page-head{ padding:calc(var(--header-h) + 46px) 0 8px; }
  /* article (blog post) page: clear the fixed header, but keep the lone "back" link tight to it
     (no big empty gap like a hero would have) */
  .section.blog-article{ padding-top:calc(var(--header-h) + 20px); }
  /* 404 / not-found page — clear the fixed header and match the design system */
  .section.error-404{ padding-top:calc(var(--header-h) + 64px); padding-bottom:90px; min-height:56vh; }
  .error-404__inner{ max-width:640px; }
  .error-404__inner .eyebrow{ color:var(--brand); }
  .error-404 .section__title{ margin:6px 0 14px; }
  .error-404 .section__sub{ margin-bottom:30px; }
  /* "read also" — related posts under the article */
  .related-posts{ max-width:1040px; margin:56px auto 0; padding-top:40px; border-top:1px solid var(--border); }
  .related-posts__title{ font-size:24px; font-weight:800; margin-bottom:24px; }
  /* pagination — style OpenCart's <ul class="pagination"> as real page buttons (no list bullets) */
  .blog-pagination .pagination{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:0; margin:0; }
  .blog-pagination .page-item{ list-style:none; }
  .blog-pagination .page-link{ display:grid; place-items:center; min-width:42px; height:42px; padding:0 13px; border-radius:11px;
    border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:700; font-size:14px; text-decoration:none;
    transition:background var(--t), color var(--t), border-color var(--t); }
  .blog-pagination .page-link:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); color:var(--brand); }
  .blog-pagination .page-item.active .page-link{ background:var(--brand); color:#fff; border-color:var(--brand); cursor:default; }
  /* home teasers: 3 cards + "Смотреть все" in one row */
  @media (min-width:981px){
    .cards--projects[data-limit], .blog-grid[data-limit]{ grid-template-columns:repeat(4,1fr); }
  }
  .post{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden; transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
  .post:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--brand) 35%, var(--border)); }
  .post__media{ position:relative; aspect-ratio:16/10; }
  .post__chips{ position:absolute; left:14px; bottom:14px; display:flex; gap:8px; flex-wrap:wrap; }
  .post__chip{ background:rgba(0,0,0,.5); color:#fff; font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px;
    backdrop-filter:blur(4px); }
  .post__play{ position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.92);
    display:grid; place-items:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); transition:transform var(--t); }
  .post:hover .post__play{ transform:scale(1.08); }
  .post__play svg{ width:24px; height:24px; fill:var(--brand); margin-left:3px; }
  .post__body{ padding:20px 20px 18px; display:flex; flex-direction:column; flex:1; }
  .post__type{ color:var(--text-soft); font-size:14px; font-weight:600; }
  .post__title{ font-size:19px; font-weight:700; margin-top:8px; line-height:1.32; flex:1; }
  .post__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
  .post__date{ color:var(--text-soft); font-size:14px; }
  .post__arrow{ width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; flex:none;
    display:grid; place-items:center; transition:transform var(--t), background var(--t); }
  .post:hover .post__arrow{ transform:scale(1.1); }
  .post__arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  
  /* reusable "Смотреть все" card — concentric rounded squares that bend around the arrow */
  .allcard{ position:relative; display:block; overflow:hidden; color:#fff; padding:52px 30px 30px; border-radius:var(--radius);
    background:linear-gradient(140deg, var(--brand), var(--brand-strong)); transition:transform var(--t), box-shadow var(--t); }
  .allcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  /* the plain "see all" card is used on mobile only; the 3D .seeall card takes over on desktop */
  @media (min-width:981px){ .allcard{ display:none; } }
  .allcard__title{ position:relative; z-index:1; font-size:clamp(23px, 2.6vw, 38px); font-weight:800; letter-spacing:-.6px; line-height:1.04; }
  .allcard__sub{ position:relative; z-index:1; margin-top:14px; font-size:16px; opacity:.92; max-width:240px; }
  .allcard__arrow{ position:absolute; right:24px; bottom:24px; width:50px; height:50px; border-radius:50%; z-index:1;
    background:#fff; color:var(--brand-strong); display:grid; place-items:center; transition:transform var(--t); }
  .allcard__arrow::before{ content:""; position:absolute; inset:-12px; border-radius:50%; border:2px solid rgba(255,255,255,.4);
    animation:allcard-pulse 2s ease-in-out infinite; }
  @keyframes allcard-pulse{ 0%,100%{ transform:scale(1); opacity:.45; } 50%{ transform:scale(1.12); opacity:.9; } }
  .allcard:hover .allcard__arrow{ transform:scale(1.07); }
  .allcard__arrow svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  
  /* ============ "see all" card — Uiverse-style 3D glass card (brand-coloured) ============ */
  .seeall{ position:relative; display:block; height:100%; text-decoration:none; perspective:1100px; perspective-origin:50% 40%; }
  /* mobile: use the plain .allcard instead of this 3D card */
  @media (max-width:980px){ .seeall{ display:none; } }
  .seeall__card{ position:relative; display:block; height:100%; min-height:210px; border-radius:var(--radius);
    background:linear-gradient(135deg, var(--brand), var(--brand-strong)); transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
    box-shadow:0 22px 40px -22px rgba(5,20,60,.55); }
  /* light theme: softer / airier blue so it doesn't clash with the white cards (dark theme keeps the bold blue) */
  [data-theme="light"] .seeall__card{ background:linear-gradient(160deg, #6ba6f6 0%, #2d5cb4 100%);
    box-shadow:0 22px 44px -22px rgba(40,90,180,.45); }
  @media (hover:hover){
    .seeall:hover .seeall__card{ transform:rotate3d(1,1,0,16deg);
      box-shadow:24px 44px 44px -34px rgba(5,20,60,.5), 0 0 60px -10px color-mix(in srgb, var(--brand) 55%, transparent); }
  }
  /* floating glass sheen */
  .seeall__glass{ position:absolute; inset:7px; border-radius:calc(var(--radius) - 5px); border-top-right-radius:90%;
    background:linear-gradient(0deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.12) 100%);
    border-left:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.2);
    transform:translate3d(0,0,22px); pointer-events:none; }
  /* orbiting circles, top-right, popping forward on Z */
  .seeall__orbit{ position:absolute; top:0; right:0; transform-style:preserve-3d; pointer-events:none; z-index:2; }
  .seeall__circle{ position:absolute; aspect-ratio:1; border-radius:50%; top:0; right:0;
    background:rgba(255,255,255,.15); box-shadow:rgba(15,30,70,.22) -8px 10px 22px 0;
    -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:transform .5s ease-in-out; }
  .seeall__circle:nth-child(1){ width:104px; transform:translate3d(0,0,18px); top:8px;  right:8px; }
  .seeall__circle:nth-child(2){ width:84px;  transform:translate3d(0,0,34px); top:10px; right:10px; transition-delay:.05s; }
  .seeall__circle:nth-child(3){ width:64px;  transform:translate3d(0,0,52px); top:16px; right:16px; transition-delay:.1s; }
  .seeall__circle:nth-child(4){ width:48px;  transform:translate3d(0,0,72px); top:22px; right:22px; transition-delay:.15s; }
  .seeall__circle--cta{ width:40px; transform:translate3d(0,0,92px); top:28px; right:28px;
    background:#fff; display:grid; place-items:center; transition-delay:.2s; }
  .seeall__circle--cta svg{ width:18px; height:18px; fill:none; stroke:var(--brand-strong); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  @media (hover:hover){
    .seeall:hover .seeall__circle:nth-child(2){ transform:translate3d(0,0,54px); }
    .seeall:hover .seeall__circle:nth-child(3){ transform:translate3d(0,0,76px); }
    .seeall:hover .seeall__circle:nth-child(4){ transform:translate3d(0,0,96px); }
    .seeall:hover .seeall__circle--cta{ transform:translate3d(0,0,118px); }
  }
  /* content (title + sub), anchored bottom-left, floating above */
  .seeall__content{ position:absolute; left:0; right:0; top:50%; z-index:3; padding:0 100px 0 28px; transform:translate3d(0,-50%,24px); }
  /* projects / products / blog cards have an image on top, so their text sits lower — line the
     "see all" text up with that text block instead of the card's vertical centre */
  .cards--projects .seeall__content, .blog-grid .seeall__content{ top:54%; transform:translate3d(0,0,24px); }
  .seeall__title{ display:block; color:#fff; font-size:clamp(22px,2.5vw,34px); font-weight:800; letter-spacing:-.5px; line-height:1.05; text-shadow:0 1px 2px rgba(6,26,70,.28); }
  .seeall__sub{ display:block; margin-top:11px; color:#fff; font-size:15px; max-width:230px; line-height:1.4; text-shadow:0 1px 2px rgba(6,26,70,.22); }
  
  /* blog page filters */
  .blog-filters{ display:flex; gap:14px; align-items:center; margin:8px 0 32px; flex-wrap:wrap; }
  /* custom directions dropdown — matches the design system (the native <select> popup can't be styled) */
  .blog-dd{ position:relative; }
  .blog-dd__btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:12px; min-width:240px;
    font:inherit; font-size:15px; font-weight:700; color:var(--text); background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius); padding:13px 18px; cursor:pointer;
    transition:border-color var(--t), background var(--t); }
  .blog-dd__btn:hover, .blog-dd.is-open .blog-dd__btn{ border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
  .blog-dd__chev{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
    opacity:.55; transition:transform .25s var(--ease); }
  .blog-dd.is-open .blog-dd__chev{ transform:rotate(180deg); }
  .blog-dd__menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:100%; z-index:120; max-height:330px; overflow-y:auto;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
    border:1px solid var(--border); border-radius:14px; padding:7px;
    box-shadow:0 22px 54px -18px rgba(0,0,0,.55), 0 2px 8px -4px rgba(0,0,0,.3);
    display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top left;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
  .blog-dd.is-open .blog-dd__menu{ opacity:1; visibility:visible; transform:none; }
  .blog-dd__menu::-webkit-scrollbar{ width:9px; }
  .blog-dd__menu::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
  .blog-dd__opt{ display:block; width:100%; text-align:left; border:none; background:transparent; font:inherit; font-weight:600; font-size:14px;
    color:var(--text); padding:10px 14px; border-radius:9px; cursor:pointer; white-space:nowrap; transition:background var(--t), color var(--t); }
  .blog-dd__opt:hover{ background:var(--pill-bg); }
  .blog-dd__opt.is-active{ background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
  .blog-tabs{ position:relative; display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:5px; }
  /* sliding "liquid" pill — slides+springs to the active tab (set in JS) */
  .blog-tabs__pill{ position:absolute; top:5px; left:0; height:calc(100% - 10px); border-radius:var(--radius-sm); background:var(--brand); z-index:0;
    box-shadow:0 8px 18px -8px color-mix(in srgb, var(--brand) 60%, transparent);
    transition:transform .5s cubic-bezier(.34,1.2,.64,1), width .5s cubic-bezier(.34,1.2,.64,1); will-change:transform, width; }
  .blog-tab{ position:relative; z-index:1; border:none; background:transparent; font:inherit; font-weight:700; font-size:15px; color:var(--text-soft);
    padding:9px 20px; border-radius:var(--radius-sm); cursor:pointer; transition:color var(--t); }
  .blog-tab:hover{ color:var(--text); }
  .blog-tab.is-active{ color:#fff; }
  
  .post.is-collapsed{ display:none; }
  @media (min-width:681px){ .card.is-collapsed{ display:none; } }
  
  /* ============ cta band ============ */
  .cta-band__inner{ text-align:center; background:linear-gradient(135deg, var(--brand), var(--brand-strong));
    color:#fff; border-radius:var(--radius); padding:60px 28px; }
  .cta-band__inner h2{ font-size:clamp(24px,3.4vw,36px); font-weight:800; letter-spacing:-.5px; }
  .cta-band__inner p{ margin:12px auto 28px; max-width:480px; opacity:.92; }
  .cta-band .btn--primary{ background:#fff; color:var(--brand-strong); }
  .cta-band .btn--primary:hover{ background:#eaf0ff; }
  
  /* ============ about + contacts ============ */
  .about{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
  .about__stats{ display:flex; gap:36px; margin-top:32px; flex-wrap:wrap; }
  .contacts{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; }
  .contacts__title{ font-size:20px; font-weight:800; margin-bottom:18px; }
  .contacts__list{ list-style:none; display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
  .contacts__item{ display:flex; flex-direction:column; gap:3px; }
  .contacts__label{ font-size:13px; color:var(--text-soft); font-weight:600; }
  .contacts__value{ font-size:17px; font-weight:600; color:var(--text); }
  a.contacts__value:hover{ color:var(--brand); }
  .contacts .btn{ width:100%; }
  /* contact page */
  .contact-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:start; margin-top:8px; }
  .contact-cta{ background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface));
    border:1px solid var(--border); border-radius:var(--radius); padding:34px 32px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
  .contact-cta__title{ font-size:24px; font-weight:800; letter-spacing:-.3px; }
  .contact-cta__text{ color:var(--text-soft); font-size:16px; line-height:1.6; max-width:46ch; }
  .contact-cta .btn{ margin-top:6px; }
  .contact-map :is(iframe, img){ width:100%; min-height:360px; border:0; border-radius:var(--radius); display:block; }
  /* about page */
  .about-top{ padding-top:calc(var(--header-h) + 46px); }   /* clear the fixed header (match other pages) */
  .about-why{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; }
  .about-why__title{ font-size:20px; font-weight:800; margin-bottom:18px; }
  .about-why__list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
  .about-why__list li{ position:relative; padding-left:28px; color:var(--text-soft); font-size:15px; line-height:1.55; }
  .about-why__list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:800; }
  
  /* ============ footer ============ */
  .footer{ padding:64px 0 32px; border-top:1px solid var(--border); background:var(--bg-alt); }
  .footer__top{ display:grid; grid-template-columns:1.4fr 2.6fr; gap:48px; padding-bottom:40px; }
  .footer__tagline{ color:var(--text-soft); font-size:15px; margin:18px 0 22px; max-width:320px; }
  .footer__socials{ display:flex; gap:12px; }
  .footer__social{ width:42px; height:42px; border-radius:var(--radius-sm); display:grid; place-items:center;
    background:var(--surface); border:1px solid var(--border); color:var(--text-soft);
    transition:color var(--t), border-color var(--t), transform var(--t); }
  .footer__social:hover{ color:var(--brand); border-color:var(--brand); transform:translateY(-3px); }
  .footer__social .icon{ width:20px; height:20px; }
  .footer__social .brand-ic{ width:19px; height:19px; fill:currentColor; }
  .footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .footer__col{ display:flex; flex-direction:column; gap:12px; }
  .footer__col h4{ font-size:15px; font-weight:800; margin-bottom:6px; }
  .footer__col h4 a{ color:inherit; transition:color var(--t); }
  .footer__col h4 a:hover{ color:var(--brand); }
  .footer__col a{ color:var(--text-soft); font-size:14px; transition:color var(--t), padding var(--t); width:fit-content; }
  .footer__col a:hover{ color:var(--brand); padding-left:3px; }
  .footer__col--contact span{ color:var(--text-soft); font-size:14px; }
  .footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding-top:28px; border-top:1px solid var(--border); }
  .footer__copy{ color:var(--text-soft); font-size:14px; }
  .footer__legal{ display:flex; gap:24px; }
  .footer__legal a{ color:var(--text-soft); font-size:14px; }
  .footer__legal a:hover{ color:var(--brand); }
  
  /* ============ request form modal ============ */
  .modal-backdrop{ position:fixed; inset:0; z-index:300; background:rgba(8,14,28,.55); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
  .modal-backdrop.is-open{ opacity:1; visibility:visible; }
  .modal{ position:fixed; z-index:301; left:50%; top:50%; transform:translate(-50%,-46%); width:460px; max-width:calc(100vw - 32px);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
  /* wider request modal on the web (desktop) version only — mobile keeps 460px / full width */
  @media (min-width:981px){ .modal{ width:740px; } }
  .modal .form{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:24px; margin-right:-14px;
    scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--brand) 60%, transparent) color-mix(in srgb, var(--border) 60%, transparent); }
  .modal .form::-webkit-scrollbar{ width:8px; }
  .modal .form::-webkit-scrollbar-track{ background:color-mix(in srgb, var(--border) 50%, transparent); border-radius:var(--radius-xs); }
  .modal .form::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--brand) 60%, transparent); border-radius:var(--radius-xs); }
  .modal.is-open{ opacity:1; visibility:visible; transform:translate(-50%,-50%); }
  .modal__close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border:none; border-radius:var(--radius-sm);
    background:var(--pill-bg); color:var(--text); cursor:pointer; font-size:17px; transition:background var(--t); }
  .modal__close:hover{ background:var(--pill-bg-hover); }
  .modal__title{ font-size:24px; font-weight:800; letter-spacing:-.5px; }
  .modal__sub{ color:var(--text-soft); margin:8px 0 22px; font-size:15px; }
  .form{ display:flex; flex-direction:column; gap:16px; }
  /* two fields side by side on desktop; single column on mobile */
  .form__row{ display:grid; grid-template-columns:1fr; gap:16px; }
  @media (min-width:981px){ .form__row{ grid-template-columns:1fr 1fr; } }
  .form__field{ display:flex; flex-direction:column; gap:7px; }
  .form__label{ font-size:14px; font-weight:600; color:var(--text-soft); }
  .form__input{ font:inherit; font-size:15px; color:var(--text); background:var(--bg-alt); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:13px 15px; outline:none; transition:border-color var(--t), background var(--t); resize:vertical; }
  .form__input:focus{ border-color:var(--brand); }
  .form__input::placeholder{ color:var(--text-soft); }
  .form__submit{ width:100%; margin-top:4px; }
  .form__success{ text-align:center; color:#16a34a; font-weight:600; font-size:15px; }
  .form__req{ color:var(--brand); transition:opacity .2s var(--ease); }
  .form__req.is-off{ opacity:0; }
  .form__hint{ font-size:13px; color:var(--text-soft); margin-top:-10px; }
  .form__counter{ align-self:flex-end; font-size:12px; color:var(--text-soft); }
  .form__error{ color:#dc2626; font-weight:600; font-size:14px; }
  .form__input.is-invalid{ border-color:#dc2626; }
  /* intl-tel-input fills the field and keeps the dark theme tidy */
  .iti{ width:100%; }
  .iti input{ width:100%; box-sizing:border-box; }
  .iti__country-list{ color:#1b2536; }
  /* country-code selector: dial code in the flag area, divided from the number */
  .iti--separate-dial-code .iti__selected-flag{ background:transparent; border-right:1px solid var(--border); }
  .iti--separate-dial-code .iti__selected-dial-code{ color:var(--text); }
  /* custom dropdown — modern replacement for the native <select> (request-form category) */
  .fsel{ position:relative; }
  .fsel__btn{ display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; text-align:left; }
  .fsel__value{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fsel__value.is-placeholder{ color:var(--text-soft); }
  .fsel__chev{ width:18px; height:18px; flex:none; fill:none; stroke:var(--text-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t); }
  .fsel.is-open .fsel__btn{ border-color:var(--brand); }
  .fsel.is-open .fsel__chev{ transform:rotate(180deg); stroke:var(--brand); }
  .fsel__menu{ list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; opacity:0;
    border:1px solid transparent; border-radius:var(--radius-sm);
    transition:max-height .26s var(--ease), opacity .2s var(--ease), margin .2s var(--ease), border-color .2s var(--ease); }
  .fsel.is-open .fsel__menu{max-height:258px;opacity:1;margin-top:7px;overflow-y:auto;border-color:var(--border);background:var(--bg-alt);padding:5px;position: absolute;width: 100%;}
  .fsel__opt{ padding:10px 12px; border-radius:var(--radius-xs); font-size:15px; color:var(--text); cursor:pointer; transition:background var(--t), color var(--t); }
  .fsel__opt:hover, .fsel__opt.is-active{ background:var(--surface); color:var(--brand); }
  
  /* ============ service detail page ============ */
  .svc-hero{ padding-top:calc(var(--header-h) + 46px); }
  .svc-hero__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
  .svc-back{ display:inline-block; color:var(--text-soft); font-weight:600; margin-bottom:18px; }
  .svc-back:hover{ color:var(--brand); }
  .svc-hero__title{ margin:6px 0 14px; }
  .svc-hero__actions{ display:flex; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
  .svc-price{ color:var(--text-soft); font-size:15px; margin-top:18px; display:inline-block; }
  .svc-price b{ color:var(--text); font-size:22px; font-weight:800; }
  .svc-hero__media{ aspect-ratio:4/3; border-radius:var(--radius); display:grid; place-items:center; position:relative; overflow:hidden; box-shadow:var(--shadow); }
  .svc-hero__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 28%, rgba(255,255,255,.10), transparent 58%); }
  .svc-hero__icon{ position:relative; z-index:1; color:#fff; display:grid; place-items:center; }
  .svc-hero__icon .icon{ width:100px; height:100px; stroke-width:1.5; filter:drop-shadow(0 10px 24px rgba(0,0,0,.3)); }
  .svc-hero__img{ position:relative; z-index:1; width:auto; height:64%; max-width:72%; object-fit:contain; filter:drop-shadow(0 18px 32px rgba(0,0,0,.38)); }
  /* full flat illustration (e.g. SaaS) — fills the frame instead of peeking like a 3D object */
  .svc-hero__img--full{ height:auto; width:95%; max-width:95%; max-height:95%; filter:drop-shadow(0 14px 26px rgba(0,0,0,.22)); }
  
  .svc-h2{ margin-bottom:28px; }
  .svc-center{ text-align:center; margin-inline:auto; max-width:600px; }
  
  /* metrics band */
  .svc-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .svc-metric{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px 32px; }
  .svc-metric b{ display:block; font-size:clamp(30px,3.4vw,44px); font-weight:800; color:var(--brand); letter-spacing:-1px; line-height:1; }
  .svc-metric span{ display:block; margin-top:10px; color:var(--text-soft); font-size:15px; }
  
  /* use-cases / advantages — bento with one featured (image) card */
  .svc-cases{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(190px,1fr); gap:20px; }
  .svc-case{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;
    transition:transform var(--t), border-color var(--t), box-shadow var(--t); }
  .svc-case:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow:var(--shadow-sm); }
  .svc-case__ic{ width:46px; height:46px; border-radius:var(--radius-sm); display:grid; place-items:center; margin-bottom:16px;
    background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
  .svc-case__ic .icon{ width:24px; height:24px; }
  .svc-case h3{ font-size:18px; font-weight:700; line-height:1.25; }
  .svc-case p{ margin-top:10px; color:var(--text-soft); font-size:14px; line-height:1.55; }
  /* featured card: spans 2×2, image/gradient background with overlaid text */
  .svc-cases .svc-case:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .svc-cases .svc-case:nth-child(2){ grid-column:span 2; }
  .svc-case--feature{ position:relative; overflow:hidden; border:none; padding:0; display:flex; align-items:flex-end;
    background-size:cover; background-position:center; }
  .svc-case--feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .svc-case__overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,14,30,.72), rgba(8,14,30,.15) 55%, rgba(8,14,30,.05)); }
  .svc-case--feature .svc-case__body{ position:relative; z-index:1; padding:30px; }
  .svc-case--feature h3{ color:#fff; font-size:clamp(20px,2vw,26px); }
  .svc-case--feature p{ color:rgba(255,255,255,.88); max-width:360px; font-size:15px; }
  
  /* editorial numbered / icon grid (use cases + advantages) — hairline-joined cells */
  .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  .svc-card{ background:var(--surface); padding:34px 32px; transition:background var(--t); }
  .svc-card:hover{ background:color-mix(in srgb, var(--brand) 6%, var(--surface)); }
  .svc-card__n{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:2px; color:var(--brand);
    margin-bottom:16px; padding-bottom:14px; border-bottom:2px solid color-mix(in srgb, var(--brand) 32%, transparent); }
  .svc-card__ic{ width:44px; height:44px; border-radius:var(--radius-sm); display:grid; place-items:center; margin-bottom:18px;
    background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
  .svc-card__ic .icon{ width:23px; height:23px; }
  .svc-card h3{ font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-.2px; }
  .svc-card p{ margin-top:10px; color:var(--text-soft); font-size:14.5px; line-height:1.6; }
  
  /* editorial numbered capabilities list (advantages) — Beeline-style, hairline dividers, no cards */
  .svc-caps{ display:grid; grid-template-columns:1fr 1fr; column-gap:64px; }
  .svc-cap{ position:relative; padding:28px 0 32px 46px; border-top:1px solid var(--border); }
  .svc-cap__n{ position:absolute; left:0; top:30px; font-size:13px; font-weight:700; letter-spacing:.5px;
    color:color-mix(in srgb, var(--text-soft) 75%, transparent); }
  .svc-cap h3{ font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-.2px; }
  .svc-cap p{ margin-top:12px; color:var(--text-soft); font-size:14.5px; line-height:1.62; max-width:48ch; }
  
  /* faq */
  .svc-faq{ display:flex; flex-direction:column; gap:12px; max-width:840px; }
  .svc-faq details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color var(--t); }
  .svc-faq details[open]{ border-color:color-mix(in srgb, var(--brand) 35%, var(--border)); }
  .svc-faq summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; font-size:16px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .svc-faq summary::-webkit-details-marker{ display:none; }
  .svc-faq summary::after{ content:"+"; color:var(--brand); font-size:24px; font-weight:400; line-height:1; transition:transform var(--t); }
  .svc-faq details[open] summary::after{ transform:rotate(45deg); }
  .svc-faq p{ padding:0 24px 22px; color:var(--text-soft); font-size:15px; line-height:1.6; }
  
  .svc-feats{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px 28px; }
  .svc-feat{ display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; }
  .svc-feat .icon{ width:24px; height:24px; color:#fff; background:var(--brand); border-radius:50%; padding:4px; flex:none; stroke-width:2.6; }
  
  .pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
  .tier{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:32px 28px; display:flex; flex-direction:column; transition:transform var(--t), box-shadow var(--t); }
  .tier:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .tier--featured{ border-color:var(--brand); box-shadow:0 20px 50px -28px color-mix(in srgb, var(--brand) 60%, transparent); }
  .tier__badge{ position:absolute; top:-12px; left:28px; background:var(--brand); color:#fff; font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px; }
  .tier__tag{ color:var(--text-soft); font-size:13px; font-weight:600; }
  .tier__name{ font-size:22px; font-weight:800; margin:4px 0 14px; }
  .tier__price{ font-size:34px; font-weight:800; letter-spacing:-1px; margin-bottom:20px; }
  .tier__price span{ font-size:15px; font-weight:600; color:var(--text-soft); margin-left:4px; letter-spacing:0; }
  .tier__feats{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1; }
  .tier__feats li{ position:relative; padding-left:26px; color:var(--text-soft); font-size:15px; }
  .tier__feats li::before{ content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800; }
  .tier .btn{ width:100%; }
  
  /* ============ case (project) detail page ============ */
  .case-hero{ padding-top:calc(var(--header-h) + 46px); }
  .case-hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
  .case-hero__text .svc-back{ display:inline-block; margin-bottom:14px; }
  .case-hero__tag{ display:inline-block; margin-left:16px; font-size:14px; transition:color var(--t); }
  .case-hero__tag:hover{ color:var(--brand-strong); text-decoration:underline; }
  .case-hero__title{ margin-bottom:18px; }
  /* detail hero: slightly larger texts on web (desktop / tablet, two-column) */
  @media (min-width:681px){
    .case-hero__title{ font-size:clamp(34px, 4.25vw, 51px); }
    .case-hero__tag{ font-size:15px; }
    .case-hero .section__sub{ font-size:19px; }
    .case-hero__text .svc-back{ font-size:16px; }
  }
  .case-hero__actions{ display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; }
  .case-hero__actions--mobile{ display:none; }   /* shown only on mobile (after the cover photo) */
  /* CTA buttons with sliding arrows: ↓ jumps to a section, → opens the form */
  .case-btn{ justify-content:space-between; gap:10px; }
  .case-btn__ico{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; opacity:.7; transition:transform var(--t), opacity var(--t); }
  .case-btn:hover .case-btn__ico{ opacity:1; }
  .case-btn:hover .case-btn__ico--right{ transform:translateX(4px); }
  .case-btn:hover .case-btn__ico--down{ transform:translateY(3px); }
  .case-hero__visual{ aspect-ratio:4/3; border-radius:var(--radius); box-shadow:var(--shadow);
    position:relative; overflow:hidden; }
  .case-hero__visual::after{ content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.10), transparent 58%); }
  .case-hero__visual--photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
  .case-hero__visual--photo::after{ background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.06), transparent 60%); }
  
  .case-info{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; }
  .case-info__lead{ font-size:clamp(16px,1.4vw,18px); font-weight:400; line-height:1.7; letter-spacing:0; color:var(--text-soft); }
  .case-info__lead p{ margin:0 0 14px; }
  .case-info__lead p:last-child{ margin-bottom:0; }
  .case-info__note{ color:var(--text-soft); font-size:15px; line-height:1.6; margin-bottom:20px; }
  .case-info__btns{ display:flex; gap:14px; flex-wrap:wrap; }
  .store-btn{ display:inline-flex; align-items:center; gap:11px; padding:11px 20px; border-radius:var(--radius);
    border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:700;
    transition:border-color var(--t), transform var(--t); }
  .store-btn:hover{ border-color:var(--brand); transform:translateY(-2px); }
  .store-btn svg{ width:26px; height:26px; flex:none; }
  .store-btn span{ display:flex; flex-direction:column; line-height:1.15; font-size:11px; font-weight:600; color:var(--text-soft); }
  .store-btn b{ font-size:16px; font-weight:800; color:var(--text); }
  /* official App Store / Google Play badge images */
  .store-badge{ display:inline-flex; transition:transform var(--t), filter var(--t); }
  .store-badge img{ height:48px; width:auto; display:block; }
  .store-badge:hover{ transform:translateY(-2px); }
  
  /* screenshots horizontal scroller */
  .case-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
  .scroller-nav{ display:flex; gap:10px; }
  .scroller-btn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
    color:var(--text); cursor:pointer; display:grid; place-items:center; transition:background var(--t), color var(--t), border-color var(--t); }
  .scroller-btn:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
  .scroller-btn.is-disabled{ opacity:.35; pointer-events:none; color:var(--text-soft); }
  .scroller-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .shots{ display:grid; grid-auto-flow:column; grid-auto-columns:min(560px, 82%); gap:24px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    scroll-padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); padding-bottom:8px; }
  .shots::-webkit-scrollbar{ display:none; }
  .shot{ position:relative; aspect-ratio:16/10; border-radius:var(--radius); scroll-snap-align:start; overflow:hidden;
    display:grid; place-items:end start; padding:18px; box-shadow:var(--shadow-sm);
    border:0; appearance:none; -webkit-appearance:none; font:inherit; text-align:left; color:#fff; }
  /* image shots open a lightbox on click */
  button.shot[data-full]{ cursor:zoom-in; transition:transform var(--t), box-shadow var(--t); }
  button.shot[data-full]:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
  .shot__cap{ color:#fff; font-weight:700; font-size:15px; background:rgba(0,0,0,.3); padding:7px 14px; border-radius:999px; }
  .shot--video{ place-items:center; }
  .shot__play{ width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center;
    box-shadow:0 12px 34px -10px rgba(0,0,0,.5); }
  .shot__play svg{ width:28px; height:28px; fill:var(--brand); margin-left:3px; }
  .shot--video .shot__cap{ position:absolute; bottom:18px; left:18px; }
  
  /* lightbox (click-to-enlarge screenshots) */
  .lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
    padding:max(28px,4vh) 24px; background:rgba(9,10,13,.93); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
  .lightbox.is-open{ opacity:1; visibility:visible; }
  .lightbox__img{ max-width:min(1150px,92vw); max-height:84vh; width:auto; height:auto; object-fit:contain;
    border-radius:16px; box-shadow:0 30px 90px -20px rgba(0,0,0,.8);
    opacity:0; transition:opacity .3s var(--ease), transform .28s var(--ease); }
  .lightbox__img.is-loaded{ opacity:1; }
  /* prev / next arrows */
  .lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px; border-radius:50%;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    color:#fff; cursor:pointer; display:grid; place-items:center; transition:background var(--t), transform var(--t); }
  .lightbox__nav--prev{ left:24px; }
  .lightbox__nav--next{ right:24px; }
  .lightbox__nav:hover{ background:rgba(255,255,255,.2); transform:translateY(-50%) scale(1.08); }
  .lightbox__nav svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  /* bottom pill: counter + caption + close */
  .lightbox__bar{ position:absolute; left:50%; bottom:max(20px,3vh); transform:translateX(-50%); z-index:3;
    display:flex; align-items:center; gap:14px; max-width:min(92vw,720px); padding:9px 9px 9px 22px; border-radius:999px;
    background:rgba(22,24,30,.72); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
    border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 34px -14px rgba(0,0,0,.6); }
  .lightbox__count{ flex:none; font-size:13px; font-weight:700; color:rgba(255,255,255,.55); letter-spacing:.4px; }
  .lightbox__caption{ flex:1; min-width:0; font-size:15px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lightbox__close{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background var(--t), transform var(--t); }
  .lightbox__close:hover{ background:rgba(255,255,255,.18); transform:scale(1.08); }
  .lightbox__close svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  /* mobile: no arrows — navigate the screenshots by swiping instead */
  @media (max-width:980px){ .lightbox__nav{ display:none !important; } }
  
  /* technologies grid + category tabs */
  .tcats{ display:flex; gap:6px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:6px; margin-bottom:26px; width:fit-content; max-width:100%; }
  .tcat{ border:none; background:transparent; font:inherit; font-weight:700; font-size:15px; color:var(--text-soft);
    padding:11px 22px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--t), color var(--t); }
  .tcat:hover{ color:var(--text); }
  .tcat.is-active{ background:var(--brand); color:#fff; }
  .tgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px; }
  .tcard{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:22px; min-height:110px; transition:transform var(--t), border-color var(--t); }
  .tcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
  .tcard__name{ position:relative; z-index:1; font-size:18px; font-weight:800; color:var(--text); }
  .tcard__mark{ position:absolute; right:10px; bottom:-10px; font-size:92px; line-height:1; color:var(--text); opacity:.07; }
  .tcard__mark--letter{ font-weight:800; bottom:-14px; right:8px; font-size:84px; opacity:.05; }
  .tcard.is-hidden{ display:none; }
  
  /* ============ reveal on scroll ============ */
  .reveal{ opacity:0; transform:translateY(10px); transition:opacity .3s ease-out, transform .3s ease-out; }
  .reveal.is-in{ opacity:1; transform:none; }
  .reveal[data-d="1"]{ transition-delay:.05s; } .reveal[data-d="2"]{ transition-delay:.1s; }
  .reveal[data-d="3"]{ transition-delay:.15s; } .reveal[data-d="4"]{ transition-delay:.2s; }
  
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
    .reveal{ opacity:1; transform:none; }
  }
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:980px){
    :root{ --header-h:64px; }
    .nav, .cta-desktop, .lang{ display:none; }
    /* keep the logo at its original mobile size (desktop bumps it larger) */
    .logo__img, .logo--footer .logo__img, .logo--footer img{ height:23px; }
    .burger{ display:flex; }
    /* nav is hidden here, so push the actions cluster (theme + burger) to the right edge */
    .header__actions{ margin-left:auto; }
    .hero__inner{ grid-template-columns:1fr; }
    .hero__visual{ order:-1; }
    .techcircle{ width:min(340px,80vw); }
    .cards--services{ grid-template-columns:1fr 1fr; }
    /* stack: accordion on top, zoomed radar below (stays visible) */
    .radar-layout{ grid-template-columns:1fr; gap:24px; }
    .radar-stage{ order:2; width:100%; max-width:460px; transform:none; }
    .about{ grid-template-columns:1fr; gap:32px; }
    .contact-grid{ grid-template-columns:1fr; }
    .footer__top{ grid-template-columns:1fr; gap:36px; }
    .footer__cols{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
    /* contacts column spans both columns; its items lay out 2-up so the right side isn't empty */
    .footer__col--contact{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
    .footer__col--contact h4{ grid-column:1 / -1; }
    .svc-hero__inner{ grid-template-columns:1fr; gap:32px; }
    .svc-hero__media{ max-width:460px; }
    .pricing{ grid-template-columns:1fr; }
    .svc-feats{ grid-template-columns:repeat(2,1fr); }
    .svc-cases{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(170px,auto); }
    .svc-cases .svc-case:nth-child(1){ grid-column:1 / -1; grid-row:auto; min-height:260px; }
    .svc-cases .svc-case:nth-child(2){ grid-column:auto; }
    .case-hero__inner{ grid-template-columns:1fr; gap:24px; }
    /* mobile: title on top → cover photo → buttons (Screenshots + Technologies in one row, Consult full-width) */
    .case-hero__actions--inline{ display:none; }
    .case-hero__actions--mobile{ display:flex; flex-wrap:wrap; gap:10px; margin-top:0; }
    .case-hero__actions--mobile .btn{ white-space:normal; line-height:1.2; padding:14px 14px; font-size:14px; }
    .case-hero__actions--mobile .btn--ghost{ flex:1 1 0; min-width:0; background:var(--surface); }
    .case-hero__actions--mobile .btn--ghost:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
    .case-hero__actions--mobile .btn--primary{ flex:1 1 100%; box-shadow:0 10px 26px -12px color-mix(in srgb, var(--brand) 75%, transparent); }
    .case-info{ grid-template-columns:1fr; gap:28px; }
  }
  
  @media (max-width:680px){
    .section{ padding:54px 0; }
    .section__head--row{ flex-direction:column; align-items:flex-start; }
  
    /* no scroll-reveal on phones — content is always visible (avoids "empty until you scroll") */
    .reveal{ opacity:1; transform:none; }
  
    /* hide the service hero illustration on phones */
    .svc-hero__media{ display:none; }
    /* tighten the gap between the hero (price) and the first section below */
    .svc-hero{ padding-bottom:14px; }
    #serviceContent .svc-hero + .section{ padding-top:30px; }
  
    /* project card cover: a bit bigger on mobile (4:3 fills the card width, borders kept) */
    .pcard__media{ aspect-ratio:4/3; }
    /* tighten the vertical gaps between project-detail sections on mobile */
    #caseContent .section{ padding-top:30px; padding-bottom:30px; }
    #caseContent .case-hero{ padding-top:calc(var(--header-h) + 46px); padding-bottom:18px; }
    /* screenshots scroller arrows are redundant on touch (swipe instead) */
    .scroller-nav{ display:none; }
    /* lift the note text closer to the overview (above the link/button) */
    .case-info{ gap:14px; }
    /* smaller cover badge, tighter into the corner */
    .cover-badge{ left:8px; bottom:8px; padding:4px 10px; font-size:11px; }
    /* mobile: keep hero texts as-is, only the project title ~5% larger */
    .case-hero__title{ font-size:27px; }
  
    /* wide service cards: one per row on mobile */
    /* service cards: compact, each as tall as its own content (not stretched) */
    .cards--services{ grid-template-columns:1fr; grid-auto-rows:auto; }
    .cards--services.home-svc-desktop{ display:none; }   /* hide the full grid on phones */
    .home-svc-mobile{ display:grid; }                    /* show only the 4 selected services */
    .scard{ min-height:118px; padding:20px; }
    .scard__body{ max-width:58%; }
    .scard__title{ font-size:17px; }
    /* match the web look: 3D object peeks from the bottom-right corner, scaled to the card */
    .scard__art .icon{ right:18px; bottom:16px; width:52px; height:52px; }
    .scard__img{ width:150px; height:150px; right:-26px; bottom:-32px; }
    /* "Hamısına bax" cards: scale the giant title down to the section's own card text */
    .allcard{ padding:22px; }
    .allcard__title{ font-size:18px; letter-spacing:-.2px; line-height:1.25; }
    .allcard__sub{ font-size:14px; margin-top:8px; max-width:72%; }
    .cards--services .allcard__title{ font-size:17px; }
    .blog-grid .allcard__title{ font-size:19px; }
    .allcard__arrow{ width:42px; height:42px; right:18px; bottom:18px; }
    .allcard__arrow svg{ width:18px; height:18px; }
    /* Projects / Products / Blog "Смотреть все": bigger, centered CTA slide */
    .cards--projects .allcard, .blog-grid[data-limit] .allcard{
      display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
    .cards--projects .allcard__title, .blog-grid[data-limit] .allcard__title{ font-size:26px; line-height:1.12; }
    .cards--projects .allcard__sub, .blog-grid[data-limit] .allcard__sub{ max-width:none; padding:0 12px; }
    /* mobile horizontal swiper for projects + home blog teasers */
    .cards--projects, .blog-grid[data-limit]{
      grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:80%;
      overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:10px;
      margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scrollbar-width:none;
    }
    .cards--projects::-webkit-scrollbar, .blog-grid[data-limit]::-webkit-scrollbar{ display:none; }
    .cards--projects .card, .cards--projects .allcard, .cards--projects .seeall,
    .blog-grid[data-limit] .post, .blog-grid[data-limit] .allcard, .blog-grid[data-limit] .seeall{ scroll-snap-align:center; }
  
    /* full blog/listing pages stay single-column */
    .blog-grid, .page-grid{ grid-template-columns:1fr; }
    .partner-logo{ width:150px; height:78px; }
    .marquee{ margin-top:24px; }
    /* animated hero badges → compact icon-only chips hugging the circle on mobile */
    .techcircle{ width:min(250px,64vw); }
    .tech-badge{ min-width:0; gap:0; padding:8px; border-radius:var(--radius-sm); }
    .tech-badge__txt{ display:none; }
    .tech-badge__ic{ width:34px; height:34px; border-radius:var(--radius-sm); }
    .tech-badge__ic svg{ width:20px; height:20px; }
    .tech-badge > i{ font-size:29px; width:34px; }
    .tech-badge--1{ top:4%;    right:-3%; }
    .tech-badge--2{ bottom:9%; right:-5%; }
    .tech-badge--3{ top:45%;   left:-5%;  }
    .hero__stats{ gap:24px; }
    /* keep the two hero CTAs side by side (equal width) instead of stacking */
    .hero__actions{ flex-wrap:nowrap; gap:10px; }
    .hero__actions .btn{ flex:1 1 0; min-width:0; padding:13px 12px; font-size:clamp(13px, 3.4vw, 15px);
      white-space:normal; line-height:1.25; text-align:center; }
    /* trim the oversized gap between the hero and the first section */
    .hero{ padding-bottom:18px; }
    .hero + .section{ padding-top:28px; }
    .header__inner{ gap:12px; }
    /* hero/detail headers must clear the fixed header (the .section 54px override is too small) */
    .case-hero, .svc-hero{ padding-top:calc(var(--header-h) + 46px); }
    /* project tech section: compact scrollable filter + 2 cards per row */
    .tcats{ flex-wrap:nowrap; overflow-x:auto; margin-bottom:18px; scrollbar-width:none; }
    .tcats::-webkit-scrollbar{ display:none; }
    .tcat{ flex:none; padding:9px 14px; font-size:14px; white-space:nowrap; }
    .tgrid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .tcard{ padding:14px; min-height:90px; }
    .tcard__name{ font-size:15px; }
    .tcard__mark{ font-size:68px; right:8px; bottom:-8px; }
    .tcard__mark--letter{ font-size:60px; bottom:-10px; }
    .footer__bottom{ flex-direction:column; align-items:flex-start; }
    .modal{ padding:28px 22px; border-radius:var(--radius); }
    .svc-feats{ grid-template-columns:1fr; }
    .svc-metrics{ grid-template-columns:1fr; }
    .svc-grid{ grid-template-columns:1fr; }
    .svc-card{ padding:26px 22px; }
    .svc-caps{ grid-template-columns:1fr; column-gap:0; }
    .svc-cap{ padding:24px 0 26px 40px; }
    .svc-cases{ grid-template-columns:1fr; }
    .svc-cases .svc-case:nth-child(1){ grid-column:auto; grid-row:auto; min-height:220px; }
    .svc-cases .svc-case:nth-child(2){ grid-column:auto; }
  }