:root {
  /* colors — matched to miranda-media.ru brand palette */
  --color-brand: #7700ff;
  --color-brand2:  #FF4F12;
  --color-primary: #7700ff;
  --color-primary-hover: #6200d9;
  --color-primary-deep: #3d0099;
  --color-primary-light: #d8d5e8;
  --color-primary-mid: #9333ff;
  --color-heading: #061b31;
  --color-label: #273951;
  --color-body: #64748d;
  --color-canvas: #ffffff;
  --color-brand-dark: #1c1e54;
  --color-dark-navy: #0d253d;
  --color-ruby: #ff4f12;
  --color-magenta: #f96bee;
  --color-magenta-light: #ffd7ef;
  --color-success: #0bb477;
  --color-success-text: #0a8f5f;
  --color-lemon: #9b6829;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;
  --color-border: #e5edf5;
  --color-border-purple: #b9b9f9;
  --color-border-soft-purple: #d6d9fc;
  --color-border-magenta: #ffd7ef;
  --color-border-dashed: #362baa;
  --color-surface-code: #f6f9fc;
  --color-neutral-ghost: rgba(16,16,16,0.3);
  --color-info-text: #2874ad;
  --color-info-border: rgba(43,145,223,0.2);
  --silver-box: linear-gradient(180deg, #dfe9f3 0%, #ffffff 100%);
  --color60: rgba(255, 255, 255, 0.6);

  /* semantic color bridge */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-text-primary: #061b31;
  --color-text-secondary: #64748d;
  --color-neutral: #929292;
  --color-error: #EF4444;
  --color-warning: #F59E0B;

  /* derived — auto-generated from primary */
  --ghost-bg: rgba(119, 0, 255, 0.03);
  --ghost-hover: rgba(119, 0, 255, 0.06);
  --focus-ring: rgba(119, 0, 255, 0.12);
  --shadow-light: rgba(6, 27, 49, 0.06);
  --shadow-heavy: rgba(0, 0, 0, 0.4);
  --skeleton-line-light: rgba(0, 0, 0, 0.04);
  --skeleton-line-peak: rgba(0, 0, 0, 0.08);

  /* dark theme — auto-derived */
  --dark-bg: #020617;
  --dark-surface: #1f1f1f;
  --dark-text: #e4e4e4;
  --dark-text-muted: #a2a2a2;
  --dark-text-dim: #767676;
  --dark-border: #2e2e2e;
  --dark-ghost-bg: rgba(119, 0, 255, 0.05);
  --dark-ghost-hover: rgba(119, 0, 255, 0.1);
  --dark-focus-ring: rgba(119, 0, 255, 0.25);
  --dark-bubble-them-bg: #2e2e2e;
  --dark-bubble-them-text-color: #e4e4e4;
  --dark-skeleton-line-light: rgba(255, 255, 255, 0.06);
  --dark-skeleton-line-peak: rgba(255, 255, 255, 0.12);

  /* typography — fonts */
  --font-display: 'RostelecomBasis', sans-serif;
  --font-body: 'RostelecomBasis', sans-serif;
  --font-code: 'RostelecomBasis', monospace;

  /* typography — scale */
  --text-display-hero: 56px;
  --text-headline: 48px;
  --text-section-heading: 32px;
  --text-subhead-lg: 26px;
  --text-subhead: 22px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-button-md: 16px;
  --text-button-sm: 14px;
  --text-link: 14px;
  --text-caption: 13px;
  --text-caption-tabular: 12px;
  --text-micro: 10px;
  --text-nano: 8px;
  --text-code-body: 12px;
  --text-overline: 11px;
  --text-badge-sm: 10px;
  --text-nav-link: 14px;
  --text-small: 14px;

  /* spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-base: 16px;
  --spacing-lg: 18px;
  --spacing-xl: 20px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 40px;
  --spacing-6: 60px;
  --spacing-8: 80px;


  /* border-radius */
  --rounded-xs: 4px;
  --rounded-sm: 5px;
  --rounded-md: 6px;
  --rounded-lg: 8px;
  --rounded-r9999: 9999px;

  /* components */
  --buttons-height-medium: 40px;
  --buttons-height-small: 32px;
  --cards-radius: 18px;
  --inputs-radius: 4px;
}

/* === variables.css === */

:root {
    --bg:                     var(--color-background);
    --surface:                var(--color-surface);
    --primary:                var(--color-primary);
    --primary-hover:          var(--color-primary-hover);
    --text:                   var(--color-text-primary);
    --text-muted:             var(--color-text-secondary);
    --text-dim:               var(--color-neutral);
    --border:                 var(--color-border);
    --border-style:           solid;
    --border-shadow:          0 0 10px;
    --shadow:                 var(--shadow-light);
    --ghost:                  var(--ghost-bg);
    --ghost-active:           var(--ghost-hover);
    --ring:                   var(--focus-ring);
    --skel-line:              var(--skeleton-line-light);
    --skel-peak:              var(--skeleton-line-peak);
    --font-heading:           var(--font-display);
    --font-ui:                var(--font-body);
    --slider-dots:            #e5edf5;

    /* skeleton opacity / mix */
    --sh-mix: 34%;
    --sh-dim: 18%;
    --sh-border: 46%;
    --sk-grad-start: 36%;
    --sk-grad-end: 18%;
    --sk-grad-border: 42%;
    --cell-bg-tint: 10%;
    --cell-tag-shadow: 45%;

    /* skeleton sizes */
    --sk-bar-height: 0.8rem;
    --sk-bar-height-sm: 0.55rem;
    --sk-bar-width: 5.5rem;
    --sk-dot-size: 0.55rem;
    --sk-dot-size-sm: 0.4rem;
    --sk-dot-lg-size: 1.4rem;
    --sk-dot-lg-size-sm: 1rem;
    --sk-pill-width: 3.2rem;
    --sk-pill-width-sm: 2.2rem;
    --sk-pill-height: 1.15rem;
    --sk-pill-height-sm: 0.8rem;
    --sk-sq-size: 0.85rem;
    --sk-sq-size-sm: 0.6rem;
    --sk-big-num-height: 1.8rem;
    --sk-big-num-height-sm: 1.2rem;
    --sk-big-num-width: 5rem;
    --sk-big-num-width-sm: 3.5rem;
    --sk-mini-bar-width: 0.5rem;
    --sk-mini-bar-width-sm: 0.35rem;
    --sk-hero-min-height: 3rem;
    --sk-hero-min-height-sm: 2rem;
    --sk-thumb-height: 3rem;
    --sk-thumb-height-sm: 2rem;
    --sk-row-gap: 0.5rem;
    --sk-row-gap-sm: 0.35rem;
    --sk-spark-gap: 0.25rem;
    --sk-spark-gap-sm: 0.15rem;
    --sk-divider-margin: 4px;

    /* grid / cell component tokens */
    --cells-radius: var(--cards-radius);
    --cells-padding: 14px;
    --cells-padding-sm: 20px 10px 10px;
    --cells-gap: 6px;
    --cells-tag-size: var(--text-overline);
    --cells-tag-padding: 6px 8px;
    --grid-gap: var(--spacing-2);
    --grid-gap-lg: var(--spacing-4);
    --grid-gap-hg: var(--spacing-6);
    --grid-gap-desktop: var(--spacing-8);
}

html.dark,
body.dark {
    --bg:           var(--dark-bg);
    --surface:      var(--dark-surface);
    --text:         var(--dark-text);
    --text-muted:   var(--dark-text-muted);
    --text-dim:     var(--dark-text-dim);
    --border:       var(--dark-border);
    --border-shadow:  0 0 10px 10px;
    --shadow:       var(--shadow-heavy);
    --ghost:        var(--dark-ghost-bg);
    --ghost-active: var(--dark-ghost-hover);
    --ring:         var(--dark-focus-ring);
    --skel-line:    var(--dark-skeleton-line-light);
    --skel-peak:    var(--dark-skeleton-line-peak);
    --silver-box:   none;
    --color60:      rgba(0,0,0,0.6);
}

/* === base.css === */

* { margin: 0; padding: 0; box-sizing: border-box; }
*::selection { background: var(--primary); color: white; }

body {
    min-height: 100vh;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    background: var(--bg);
    color: var(--text);
    color-scheme: light;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    transition: background 0.5s ease, color 0.5s ease;
}

html.dark body,
body.dark { color-scheme: dark; }

/* === grid.css === */
:root {
    /* cell accents — every cell derived from design system tokens via oklch mixing */
    --c-hero:               var(--color-primary);
    --c-stats:                color-mix(in oklch, var(--color-warning) 85%, var(--color-primary));
    --c-tariffs_home:       var(--color-primary);
    --c-tariffs_cta:        var(--color-primary);
    --c-banner1:              color-mix(in oklch, var(--color-success) 85%, var(--color-primary));
    --c-howto:                color-mix(in oklch, var(--color-warning) 85%, var(--color-primary));
    --c-plus:                 color-mix(in oklch, var(--color-primary) 60%, var(--color-error));
    --c-gift:                 color-mix(in oklch, var(--color-success) 65%, var(--color-primary));
    --c-banner2:              color-mix(in oklch, var(--color-success) 40%, var(--color-primary));
    --c-about:                color-mix(in oklch, var(--color-success) 85%, var(--color-primary));
    --c-banner3:              color-mix(in oklch, var(--color-primary) 80%, var(--color-success));
    --c-form48:             var(--color-brand2);
    --c-news:                 color-mix(in oklch, var(--color-primary) 80%, var(--color-success));
    --c-faq:                  color-mix(in oklch, var(--color-success) 65%, var(--color-primary));


    --c-tariffs_mob:        var(--color-primary);
    --c-services_mob:       var(--color-primary);
    --c-tasks:                color-mix(in oklch, var(--color-primary) 80%, var(--color-success));
    
    /*
    --c-services:             var(--color-primary);
    --c-card:                 color-mix(in oklch, var(--color-error) 80%, var(--color-primary));
    --c-media:                color-mix(in oklch, var(--color-success) 65%, var(--color-primary));
    --c-feat:                 color-mix(in oklch, var(--color-primary) 60%, var(--color-error));
    --c-feed:                 color-mix(in oklch, var(--color-success) 40%, var(--color-primary));
    */
}

.bento {
    display: grid;
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    gap: var(--grid-gap-lg);
    padding: 0px 15px;
    grid-template-columns: 1fr;
    grid-template-areas:
        'stats'
        'tariffs_home'
        'tariffs_cta'
        'banner1'
        'howto'
        'plus'
        'gift'
        'banner2'
        'about'
        'banner3'
        'form48'
        'news'
        'faq'


        'tariffs_mob'
        'services_mob'
        'tasks';
    transition: gap 0.4s ease;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    position: relative;
    top: -35px;
    z-index: 20;
    margin-bottom: -35px;
    background: var(--bg);
    transition: background 0.5s ease, color 0.5s ease;
}

/* === cells.css === */

.cell--hero               { grid-area: hero; }
.cell--stats              { grid-area: stats;               --hue: var(--c-stats); margin-top: 30px;}
.cell--tariffs_home       { grid-area: tariffs_home;        --hue: var(--c-tariffs_home); }
.cell--tariffs_cta        { grid-area: tariffs_cta;         --hue: var(--c-tariffs_cta); }
.cell--banner1            { grid-area: banner1;             --hue: var(--c-banner1); }
.cell--howto              { grid-area: howto;               --hue: var(--c-howto); }
.cell--plus               { grid-area: plus;                --hue: var(--c-plus); }
.cell--gift               { grid-area: gift;                --hue: var(--c-gift); }
.cell--banner2            { grid-area: banner2;             --hue: var(--c-banner2); }
.cell--about              { grid-area: about;               --hue: var(--c-about); }
.cell--banner3            { grid-area: banner3;             --hue: var(--c-banner3); }
.cell--form48             { grid-area: form48;              --hue: var(--c-form48); }
.cell--news               { grid-area: news;                --hue: var(--c-news); }
.cell--faq                { grid-area: faq;                 --hue: var(--c-faq); }


.cell--tariffs_mob        { grid-area: tariffs_mob;         --hue: var(--c-tariffs_mob); }
.cell--services_mob       { grid-area: services_mob;        --hue: var(--c-services_mob); }
.cell--tasks              { grid-area: tasks;               --hue: var(--c-tasks); }

.cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cells-gap);
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

.cell__tag {
    position: absolute;
    top: -0.75rem;
    left: 1.5rem;
    font-size: var(--cells-tag-size);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-on-primary);
    background: var(--hue);
    padding: var(--cells-tag-padding);
    border-radius: var(--rounded-r9999);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--hue) var(--cell-tag-shadow), transparent);
    line-height: 1;
    z-index: 10;
    pointer-events: none;
}

/* === skeleton.css === */

.sk {
    display: block;
    background: color-mix(in srgb, var(--hue) var(--sh-mix), var(--surface));
    border-radius: var(--rounded-r9999);
}

.sk--dim { background: color-mix(in srgb, var(--hue) var(--sh-dim), var(--surface)); }

.sk--bar    { height: var(--sk-bar-height); width: var(--sk-bar-width); border-radius: var(--rounded-xs); }
.sk--w-30   { width: 30%; }
.sk--w-40   { width: 40%; }
.sk--w-50   { width: 50%; }
.sk--w-60   { width: 60%; }
.sk--w-80   { width: 80%; }
.sk--grow   { flex: 1; }

.sk--dot    { width: var(--sk-dot-size); height: var(--sk-dot-size); border-radius: 50%; background: var(--hue); flex-shrink: 0; }
.sk--dot-lg { width: var(--sk-dot-lg-size); height: var(--sk-dot-lg-size); border-radius: 50%; background: color-mix(in srgb, var(--hue) var(--sh-mix), var(--surface)); flex-shrink: 0; }
.sk--pill   { width: var(--sk-pill-width); height: var(--sk-pill-height); border-radius: var(--rounded-r9999); }
.sk--sq     { width: var(--sk-sq-size); height: var(--sk-sq-size); border-radius: var(--rounded-xs); flex-shrink: 0; }

.sk--spacer { flex: 1; background: transparent; }

.sk--divider {
    height: 1px;
    width: 100%;
    background: color-mix(in srgb, var(--hue) var(--sh-mix), var(--surface));
    border-radius: 0;
    margin: var(--sk-divider-margin) 0;
}

.sk--big-num { height: var(--sk-big-num-height); width: var(--sk-big-num-width); border-radius: var(--rounded-xs); }

.sk--mini-bar {
    width: var(--sk-mini-bar-width);
    border-radius: var(--rounded-xs);
    background: color-mix(in srgb, var(--hue) var(--sh-mix), var(--surface));
    flex-shrink: 0;
}

.sk--hero {
    flex: 1;
    border-radius: var(--rounded-sm);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hue) var(--sk-grad-start), var(--surface)),
            color-mix(in srgb, var(--hue) var(--sk-grad-end), var(--surface)) 70%);
    border: 1px solid color-mix(in srgb, var(--hue) var(--sk-grad-border), var(--surface));
}

.sk--thumb {
    width: 100%;
    height: var(--sk-thumb-height);
    border-radius: var(--rounded-xs);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hue) var(--sk-grad-start), var(--surface)),
            color-mix(in srgb, var(--hue) var(--sk-grad-end), var(--surface)) 70%);
    border: 1px solid color-mix(in srgb, var(--hue) var(--sk-grad-border), var(--surface));
}

.sk--sq-sm {
    border-radius: var(--rounded-xs);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hue) var(--sk-grad-start), var(--surface)),
            color-mix(in srgb, var(--hue) var(--sk-grad-end), var(--surface)) 70%);
    border: 1px solid color-mix(in srgb, var(--hue) var(--sk-grad-border), var(--surface));
    min-height: 0;
}

.sk-row { display: flex; align-items: center; gap: var(--sk-row-gap); width: 100%; }
.sk-row--between { justify-content: space-between; }
.sk-row--spark { gap: var(--sk-spark-gap); align-items: flex-end; }

.sk-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--spacing-1);
    flex: 1;
    min-height: 6rem;
}

/* === responsive.css === */

@media (max-width: 767px) {
    .sk--bar    { height: var(--sk-bar-height-sm); }
    .sk--dot    { width: var(--sk-dot-size-sm); height: var(--sk-dot-size-sm); }
    .sk--dot-lg { width: var(--sk-dot-lg-size-sm); height: var(--sk-dot-lg-size-sm); }
    .sk--pill   { width: var(--sk-pill-width-sm); height: var(--sk-pill-height-sm); }
    .sk--sq     { width: var(--sk-sq-size-sm); height: var(--sk-sq-size-sm); }
    .sk--big-num { height: var(--sk-big-num-height-sm); width: var(--sk-big-num-width-sm); }
    .sk--mini-bar { width: var(--sk-mini-bar-width-sm); }
    .sk--thumb  { height: var(--sk-thumb-height-sm); }
    .sk--hero   { min-height: var(--sk-hero-min-height-sm); }
    .sk-row     { gap: var(--sk-row-gap-sm); }
    .sk-row--spark { gap: var(--sk-spark-gap-sm); }
    .sk-grid-2x2 { gap: var(--spacing-xs); }
}

@media (max-width: 479px) {
    .bento { padding: var(--spacing-2); }
}