:root {
      --bg: #faf8f5;                /* paper base */
      --bg0: rgba(250,248,245,0);   /* transparent version of bg to avoid black-edge */
      --ink: #1f1b2e;               /* deep ink */
      --muted: #615a79;             /* muted text */
      --purple: #6d28d9;            /* primary purple */
      --purple-600: #7c3aed;
      --blue: #2563eb;              /* accent blue */
      --red: #ef4444;               /* accent red */
      --rose: #f43f5e;              /* secondary red/rose */
      --brand-grad: linear-gradient(135deg, var(--blue) 0%, var(--purple) 50%, var(--red) 100%);
      --card: #ffffff;              /* card background */
      --ring: rgba(109, 40, 217, 0.25);
      --paper-shadow: 0 24px 60px rgba(20, 12, 52, 0.16);
    }
    /* --- Paper background (flat), gradient wash (fixed), micro-noise (fixed) --- */
    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--bg); /* flat base only */
      color: var(--ink);
      font-family: "PT Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
      overflow-x: hidden;
    }
    /* Gradient wash – fixed, oversized so it never “ends” */
    body::before{
      content:"";
      position: fixed;
      inset: -12vh -12vw;           /* overscan to avoid edge math issues */
      pointer-events: none;
      background:
      /*  radial-gradient(farthest-corner at 85% -10%, rgba(122,98,255,.12) 0%, rgba(122,98,255,0) 92%),
        radial-gradient(farthest-corner at -10% 20%, rgba(37,99,235,.12) 0%, rgba(37,99,235,0) 92%),
        radial-gradient(farthest-corner at 50% 120%, rgba(244,63,94,.10) 0%, rgba(244,63,94,0) 92%);*/
        radial-gradient(1200px 800px at 85% -10%, rgba(122, 98, 255, 0.12), transparent 60%),
        radial-gradient(1000px 600px at -10% 20%, rgba(37, 99, 235, 0.12), transparent 60%),
        radial-gradient(800px 500px at 50% 120%, rgba(244, 63, 94, 0.10), transparent 60%),
        var(--bg)
      will-change: transform;
      z-index: 0;                   /* sits behind content, above flat bg */
    }
    /* Micro-dither noise – fixed, non-tiling */
    body::after{
      content:"";
      position: fixed; inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0.15'/><feComponentTransfer><feFuncR type='discrete' tableValues='0 1'/><feFuncG type='discrete' tableValues='0 1'/><feFuncB type='discrete' tableValues='0 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.03'/></svg>");
      background-size: cover;
      background-repeat: no-repeat;
      mix-blend-mode: multiply;
      z-index: 0;
    }
    
    /* --- Layout helpers --- */
    .container { width: min(1200px, 92vw); margin: 0 auto; }
    .grid { display: grid; gap: 1.25rem; }

    /* --- Navigation --- */
    .nav {
      position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
      backdrop-filter: saturate(150%) blur(10px);
      background: rgba(250, 248, 245, 0.6);
      border-bottom: 1px solid rgba(109,40,217,0.12);
    }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 2px 0; }
    .brand { display:flex; gap:1rem; align-items:center; color:inherit; cursor: default; }
    .logo {
      height: 64px; flex: 0 0 64px;
      display: block; object-fit: contain; background: transparent; 
    }
    .brand h1 { font-size: 1.15rem; margin: 0; letter-spacing: .3px; font-weight: 800; }
    .brand span { display:block; font-size: .72rem; color: var(--muted); letter-spacing: .25px; margin-top: 2px; }

    .nav ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
    .nav a { text-decoration:none; color: var(--ink); font-weight: 600; padding:.55rem .85rem; border-radius: 999px; }
    .nav a:hover { background: rgba(109,40,217,.08); }
    .brand:hover{ background: transparent !important; }
    .cta { background: var(--brand-grad); color:#fff !important; box-shadow: 0 10px 20px rgba(109,40,217,.35); }
    .cta:hover { transform: translateY(-1px); }

    /* --- Hero --- */
    .hero { position: relative; padding: clamp(3rem, 5vw + 2rem, 6.5rem) 0 3rem; }
    .hero-wrap { display:grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items:center; }
    @media (max-width: 900px){ .hero-wrap{ grid-template-columns: 1fr; } }

    .headline { font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(2.1rem, 2.7vw + 1.6rem, 4rem); margin:0 0 1rem; }
    .headline .accent { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .sub { color: var(--muted); font-size: clamp(1rem, .7vw + .9rem, 1.125rem); max-width: 58ch; margin-bottom: 1.5rem; }

    .hero-card { background: var(--card); border-radius: 22px; padding: 1.2rem; box-shadow: var(--paper-shadow); border: 1px solid rgba(20,12,52,.04); }
    .hero-badges { display:flex; flex-wrap:wrap; gap:.6rem; margin:.5rem 0 1.2rem; }
    .badge { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .65rem; border-radius: 999px; font-size:.8rem; font-weight:700; color:#1b1438; background: #fff; border:1px solid rgba(109,40,217,.20); box-shadow: 0 4px 16px rgba(109,40,217,.12); }
    .badge .dot { width:8px; height:8px; border-radius:999px; background: currentColor; opacity:.9; }

    .actions { display:flex; flex-wrap:wrap; gap:.8rem; }
    .btn { 
      appearance: none; border:0; cursor:pointer; font-weight:800; letter-spacing:.2px;
      padding: .9rem 1.1rem; border-radius: 14px; transition: transform .12s ease, box-shadow .12s ease, background .3s ease;
      text-decoration:none; display:inline-flex; align-items:center; gap:.6rem;
    }
    .btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 16px 36px rgba(109,40,217,.35); }
    .btn-primary:hover { transform: translateY(-2px); }
    .btn-ghost { background: #fff; color: inherit; border:1px solid rgba(109,40,217,.25); }
    .btn-ghost:hover { box-shadow: 0 8px 20px rgba(109,40,217,.15); }
    .btn-holo{ background: transparent; color: inherit; border: none; }

    .fx-gradient-frame{ position: relative; z-index: 0; }
    .fx-gradient-frame::before{
      content:"";
      position:absolute;
      inset:-2px;                      /* thin “frame” around the button */
      border-radius: inherit;          /* keep your shape */
      background: var(--btn-frame-gradient, linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%));
      z-index:-1;
      pointer-events: none;
      transition: transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .fx-glow{ position: relative; z-index: 0; }
    .fx-glow::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius: inherit;
      background: var(--btn-glow-gradient, linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%));
      transform: translate3d(0,0,0) scale(0.98);
      filter: blur(18px);
      z-index:-2;
      pointer-events: none;
      transition: filter .25s ease, transform .25s ease;
    }
    .fx-glow:hover::after{ filter: blur(30px); transform: scale(1); }
    .fx-glow:hover::before{ transform: rotate(-180deg) scale(1.02); }
    .fx-glow:active::before{ transform: scale(0.96); }

    .kpis { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
    .kpi { background:#fff; border:1px solid rgba(109,40,217,.16); border-radius:16px; padding: .9rem .9rem; box-shadow: 0 8px 20px rgba(31,27,46,.06); }
    .kpi strong { font-size:1.35rem; display:block; }
    .kpi span { color: var(--muted); font-size:.9rem; }
    /* KPI bullet list */
    .kpi .kpi-items{ list-style: none; margin:.45rem 0 0; padding:0; }
    .kpi .kpi-items li{ margin:.2rem 0; }
    .kpi .kpi-items li::before{ content:"→ "; font-weight:700; margin-right:.25rem; }

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

    /* --- Section titles --- */
    .section { padding: 3rem 0 2rem; }
    .section h2 { font-size: clamp(1.5rem, .9vw + 1.2rem, 2.2rem); margin:0 0 .75rem; letter-spacing: -0.01em; }
    .section p.lead { color: var(--muted); margin-top:.25rem; max-width: 65ch; }

    /* --- Services --- */
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 1000px){ .services-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 700px){ .services-grid { grid-template-columns: 1fr; } }

    .card { background: var(--card); border-radius: 20px; padding: 1.1rem 1.1rem 1rem; box-shadow: var(--paper-shadow); border: 1px solid rgba(20,12,52,.06); position: relative; overflow:hidden; }
    .card:after { content:""; position:absolute; inset:auto -30% -30% auto; width:220px; height:220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(109,40,217,.08), transparent); filter: blur(6px); }
    .card .icon { width: 46px; height: 46px; border-radius: 12px; display:grid; place-items:center; background: var(--brand-grad); color:#fff; box-shadow: 0 10px 22px rgba(109,40,217,.35); }
    .card h3 { margin:.8rem 0 .4rem; font-size: 1.12rem; }
    .card p { color: var(--muted); margin: 0 0 .6rem; }
    .tag-row { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
    .tag { font-size:.72rem; border:1px dashed rgba(31,27,46,.2); padding:.28rem .5rem; border-radius: 999px; color:#3a3553; background: rgba(255,255,255,.7); }

    /* --- Why Us --- */
    .why { display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; }
    @media (max-width: 950px){ .why { grid-template-columns: 1fr; } }
    .list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
    .list li { display:flex; gap:.65rem; align-items:flex-start; background: #fff; padding:.65rem .75rem; border-radius: 12px; border:1px solid rgba(109,40,217,.15); box-shadow: 0 6px 16px rgba(31,27,46,.06); }
    .check { width:22px; height:22px; border-radius:6px; background: var(--brand-grad); display:grid; place-items:center; color:#fff; flex:0 0 22px; box-shadow: 0 8px 16px rgba(109,40,217,.3); }

    /* --- Contact --- */

    /* --- Contacts block --- */
    .contact a,
    .contact a:visited,
    .contact a:active,
    .contact a:focus {color: #253D8B;}

    .contact a:hover {color: #1a2e6d;       /* темнее при наведении */} 
    .contact { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; }
    @media (max-width: 900px){ .contact{ grid-template-columns: 1fr; } }
    .contact-card { background:#fff; border-radius:22px; border:1px solid rgba(109,40,217,.15); box-shadow: var(--paper-shadow); padding: 1.1rem; }
    .contact-methods { display:grid; gap:.6rem; }
    .method { display:flex; align-items:center; gap:.8rem; padding:.6rem .7rem; border:1px dashed rgba(31,27,46,.18); border-radius:12px; background: rgba(255,255,255,.85); }
    .method .i, .i { width:28px; height:28px; border-radius:8px; background: var(--brand-grad); color:#fff; display:grid; place-items:center; }

    label { font-weight:700; font-size:.92rem; display:block; margin:.6rem 0 .35rem; }
    input, textarea, select {
      width: 100%; padding:.8rem .9rem; border-radius:12px; border:1px solid rgba(31,27,46,.22); background:#fff;
      font-size:1rem; color: var(--ink); outline: none; box-shadow: 0 6px 14px rgba(31,27,46,.06);
    }
    textarea { min-height: 140px; resize: vertical; }
    input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px var(--ring); border-color: var(--purple-600); }

    .notice { font-size: .85rem; color: var(--muted); margin-top:.6rem; }

    /* --- Footer --- */
    footer { padding: 2rem 0 3rem; color: var(--muted); font-size:.95rem; }

    /* --- Animated accents --- */
    .floaters { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
    .blob { position:absolute; filter:blur(30px); opacity:.35; mix-blend-mode:multiply; border-radius:50%; animation: float 18s ease-in-out infinite; }
    .blob.p { background: radial-gradient(circle at 30% 30%, #8b5cf6, #6d28d9); }
    .blob.b { background: radial-gradient(circle at 60% 40%, #60a5fa, #2563eb); }
    .blob.r { background: radial-gradient(circle at 35% 60%, #fb7185, #ef4444); }
    .blob.small { width:240px; height:240px; }
    .blob.med { width:380px; height:380px; }
    .blob.large { width:560px; height:560px; }
    @keyframes float { 0%,100%{ transform: translateY(0) translateX(0);} 50%{ transform: translateY(-18px) translateX(8px);} }

    /* --- Utilities --- */
    .muted { color: var(--muted); }
    .cap { text-transform: uppercase; font-weight: 800; letter-spacing: .14em; font-size: .73rem; color: #3b2f66; }
    .pill { display:inline-block; padding:.35rem .6rem; border-radius:999px; background:#fff; border:1px solid rgba(109,40,217,.22); color:#3b2f66; font-weight:800; font-size:.72rem; }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce){
      * { animation: none !important; transition: none !important; }
    }
    *, *::before, *::after { box-sizing: border-box; }
      /* --- Mobile nav fixes --- */
    .nav-inner > * { min-width: 0; }
    @media (max-width: 760px){
      .nav-inner{ padding:2px 0; gap:.6rem; }
      .logo{height:48px; flex:0 0 48px; }
      .brand h1{ font-size:1rem; }
      .brand span{ display:none; }
      .nav ul{ gap:.5rem; flex-wrap: nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
      .nav ul::-webkit-scrollbar{ display:none; }
      .nav a{ padding:.5rem .7rem; font-size:.92rem; white-space:nowrap; }
    }
    
      /* --- Burger & dropdown menu --- */
    .burger{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid rgba(109,40,217,.25); box-shadow:0 8px 20px rgba(109,40,217,.12); cursor:pointer; }
    .burger:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); }
    .burger svg{ display:block; }

    .menu-panel{ position:absolute; top:100%; left:0; right:0; background:rgba(250,248,245,.98); backdrop-filter: blur(10px) saturate(150%); border-bottom:1px solid rgba(109,40,217,.12); box-shadow:0 20px 40px rgba(31,27,46,.12); display:none; padding:.6rem 0; }
    .menu-panel .container{ display:grid; gap:.5rem; }
    .menu-link{ display:block; padding:.8rem 1rem; border-radius:12px; font-weight:800; text-decoration:none; color:var(--ink); border:1px solid rgba(109,40,217,.15); background:#fff; }
    .menu-link:hover{ box-shadow:0 8px 16px rgba(109,40,217,.15); }
    .menu-panel .menu-link.cta{ background: var(--brand-grad); color:#fff; box-shadow:0 12px 26px rgba(109,40,217,.3); border-color:transparent; }

    .nav.open .menu-panel{ display:block; animation:menuIn .18s ease-out; }
    @keyframes menuIn{ from{ opacity:0; transform: translateY(-6px);} to{ opacity:1; transform: translateY(0);} }

    /* Override previous mobile nav behavior: use burger */
    @media (max-width:760px){
      .burger{ display:flex; }
      .nav ul{ display:none !important; }
    }
    .hny-wrap{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
              overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- Utilities extracted from inline styles --- */
.mt-06 { margin-top: .6rem; }
.mt-12 { margin-top: 1.2rem; }
.inline-row { display: flex; align-items: center; gap: .8rem; }
.wrap-row-between { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; justify-content:space-between; }
.hidden { display: none; }

/* Blob position variants */
.pos-blob-1 { top: -90px; left: -100px; }
.pos-blob-2 { top: 20%; right: -80px; animation-delay: -4s; }
.pos-blob-3 { bottom: -220px; left: 30%; animation-delay: -8s; }

/* Dot color variants */
.dot-purple { background: #6d28d9; }
.dot-blue { background: #2563eb; }
.dot-red { background: #ef4444; }

/* Ensure burger is hidden on desktop and links are visible */
@media (min-width: 761px){
  .burger{ display: none !important; }
  .menu-panel{ display: none !important; }
  .nav ul{ display: flex !important; }
}
/* --- Fixed header offset to avoid content jump under fixed .nav --- */
body { padding-top: 72px; }
@media (max-width: 900px){ body { padding-top: 60px; } }

/* Ensure in-page anchors aren't hidden behind the fixed header */
section[id]{ scroll-margin-top: 72px; }
@media (max-width: 900px){ section[id]{ scroll-margin-top: 60px; } }