* { box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    html, body { margin: 0; padding: 0; }
    body { background: #05070d; }
    .page {
      --bg: #05070d;
      --bg-alt: #0b0f1a;
      --card: #10151f;
      --border: #1f2837;
      --border-light: #29354a;
      --text: #f2f8ff;
      --text-2: #cfe3f5;
      --text-3: #9db3c9;
      --text-4: #7f93a8;
      --text-5: #6b7f96;
      --text-6: #56697c;
      --on-accent: #05070d;

      font-family: 'Rubik', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      width: 100%;
    }
    h1, h2, h3, .logo-text, .price-tag, .btn, .badge { font-family: 'Rubik', system-ui, sans-serif; }
    .eyebrow, .tag, .step-num, .mock-tag { font-family: 'JetBrains Mono', monospace; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { color: var(--accent2); }

    .nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 12px; padding: 22px 32px; max-width: 1180px; margin: 0 auto; gap: 20px; }
    .logo { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--text); white-space: nowrap; }
    .logo svg { color: var(--accent); flex-shrink: 0; }
    .nav-links { display: flex; gap: 26px; flex-wrap: wrap; }
    .nav-links a { color: var(--text-2); font-size: 14.5px; font-weight: 500; }
    .nav-links a:hover { color: var(--accent); }
    .nav .btn { flex-shrink: 0; }
    @media (max-width: 720px) { .nav-links { display: none; } }
    @media (max-width: 400px) { .nav { padding: 18px 20px; } .nav .btn { padding: 11px 16px; font-size: 12.5px; } .logo span { font-size: 17px; } }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 8px; font-weight: 700; font-size: 13.5px; cursor: pointer; border: none; white-space: nowrap; }
    .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); }
    .btn-primary:hover { filter: brightness(1.12); }
    .btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border-light); }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
    .btn-block { width: 100%; }

    @media (prefers-reduced-motion: reduce) {
      .forge-brief, .forge-hammer, .spark, .forge-bubble,
      .hero-spark-badge, .hero-card-front, .forge-progress { animation: none !important; }
    }

    .breadcrumb { max-width: 1180px; margin: 26px auto 0; padding: 0 32px; font-size: 12.8px; color: var(--text-5); }
    .breadcrumb a { color: var(--text-4); }
    .breadcrumb a:hover { color: var(--accent); }

    .section { padding: clamp(48px, 7vh, 84px) 32px; position: relative; width: 100%; }
    .section-alt { background: var(--bg-alt); }
    .section-head { max-width: 1180px; margin: 0 auto 36px; }
    .section-head .tag { color: var(--accent); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; display: block; }
    .section-head h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; font-weight: 800; line-height: 1.2; color: var(--text); }
    .section-head p { color: var(--text-3); font-size: 15.5px; max-width: 620px; margin: 0; line-height: 1.55; }

    .hero { padding: clamp(40px, 6vh, 76px) 32px clamp(40px, 7vh, 96px); position: relative; overflow: hidden; width: 100%; }
    .hero-glow-a, .hero-glow-b { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.28; z-index: 0; pointer-events: none; }
    .hero-glow-a { width: 480px; height: 480px; background: var(--accent); top: -160px; right: -80px; }
    .hero-glow-b { width: 420px; height: 420px; background: var(--accent2); bottom: -180px; left: -120px; }
    .hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 56px; align-items: center; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); margin-bottom: 18px; }
    .eyebrow::before { content: "//"; color: var(--accent2); }
    .hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.12; margin: 0 0 22px; font-weight: 800; color: var(--text); }
    .hero p { font-size: 17px; line-height: 1.6; color: var(--text-3); margin: 0 0 30px; max-width: 520px; }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
    .hero-note { font-size: 13px; color: var(--text-5); }
    .hero-art { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--bg-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .hero-art::before { content: ""; position: absolute; width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 68%); opacity: 0.3; filter: blur(6px); }
    .hero-composition { position: relative; width: 76%; }
    .hero-card-back { position: absolute; top: 12%; left: 6%; width: 80%; aspect-ratio: 4 / 3; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; transform: rotate(6deg); }
    .hero-card-front { position: relative; width: 94%; margin: 8% 0 0 -4%; background: var(--card); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; transform: rotate(-3deg); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6); }
    .hero-spark-badge { position: absolute; bottom: -9%; right: -7%; width: 27%; aspect-ratio: 1; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 30% 70% 65% 35% / 40% 35% 65% 60%; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 30px -10px rgba(0,0,0,0.55); }
    .hero-spark-badge svg { width: 48%; height: 48%; }

    /* Hero "forging" mini-loop: brief arrives → smith hammers it into shape (sparks, progress fill) → asks "Так?" */
    .forge-brief { position: absolute; top: -9%; left: -9%; z-index: 5; display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border-light); border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 11.5px; font-weight: 600; color: var(--text-2); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5); white-space: nowrap; opacity: 0; transform: translate(-8px,6px) scale(0.9); animation: brief-in 10s ease-in-out infinite; }
    .forge-brief svg { flex-shrink: 0; }
    .forge-hammer { position: absolute; top: -16%; right: 0%; width: 30%; z-index: 6; transform-origin: 78% 22%; transform: rotate(-32deg); filter: drop-shadow(0 8px 12px rgba(0,0,0,0.45)); animation: hammer-swing 10s ease-in-out infinite; }
    .forge-sparks { position: absolute; top: 4%; right: 12%; width: 0; height: 0; z-index: 7; }
    .spark { position: absolute; top: 0; right: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 9px 2px var(--accent2); opacity: 0; transform: translate(0,0) scale(0.3); animation: spark-fly 10s ease-out infinite; }
    .spark:nth-child(even) { background: var(--accent); box-shadow: 0 0 9px 2px var(--accent); }
    .forge-bubble { position: absolute; top: -15%; right: -5%; z-index: 8; background: var(--card); border: 1px solid var(--accent); color: var(--text); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 14px 14px 14px 4px; box-shadow: 0 12px 26px -12px rgba(0,0,0,0.55); opacity: 0; transform: scale(0.5); animation: bubble-pop 10s ease-in-out infinite; }
    .hero-spark-badge { animation: badge-strike-pulse 10s ease-in-out infinite; }
    .hero-card-front { animation: card-impact 10s ease-in-out infinite; }
    .forge-progress { animation: forge-progress-grow 10s ease-in-out infinite; }

    @keyframes brief-in {
      0%, 6% { opacity: 0; transform: translate(-8px,6px) scale(0.9); }
      12%, 18% { opacity: 1; transform: translate(0,0) scale(1); }
      24% { opacity: 0; transform: translate(4px,-6px) scale(0.85); }
      100% { opacity: 0; transform: translate(-8px,6px) scale(0.9); }
    }
    @keyframes hammer-swing {
      0%, 20%, 100% { transform: rotate(-32deg); }
      24% { transform: rotate(8deg); }
      26% { transform: rotate(-6deg); }
      28% { transform: rotate(-28deg); }
      31% { transform: rotate(-30deg); }
      32% { transform: rotate(8deg); }
      34% { transform: rotate(-6deg); }
      36% { transform: rotate(-28deg); }
      39% { transform: rotate(-30deg); }
      40% { transform: rotate(6deg); }
      42% { transform: rotate(-6deg); }
      44%, 50% { transform: rotate(-32deg); }
    }
    @keyframes spark-fly {
      0%, 23%, 31%, 39%, 47%, 100% { opacity: 0; transform: translate(0,0) scale(0.3); }
      24%, 32%, 40% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
      28%, 36%, 44% { opacity: 0; transform: translate(calc(var(--dx) * 1.7), calc(var(--dy) * 1.7)) scale(0.4); }
    }
    @keyframes bubble-pop {
      0%, 52% { opacity: 0; transform: scale(0.5); }
      58% { opacity: 1; transform: scale(1.08); }
      62%, 88% { opacity: 1; transform: scale(1); }
      95% { opacity: 0; transform: scale(0.85); }
      100% { opacity: 0; transform: scale(0.5); }
    }
    @keyframes badge-strike-pulse {
      0%, 20%, 28%, 36%, 44%, 100% { transform: scale(1); box-shadow: 0 16px 30px -10px rgba(0,0,0,0.55); }
      24% { transform: scale(1.16); box-shadow: 0 16px 30px -10px rgba(0,0,0,0.55), 0 0 30px 6px var(--accent2); }
      32% { transform: scale(1.16); box-shadow: 0 16px 30px -10px rgba(0,0,0,0.55), 0 0 30px 6px var(--accent); }
      40% { transform: scale(1.16); box-shadow: 0 16px 30px -10px rgba(0,0,0,0.55), 0 0 30px 6px var(--accent2); }
    }
    @keyframes card-impact {
      0%, 23%, 26%, 31%, 34%, 39%, 42%, 100% { transform: rotate(-3deg) translateY(0); }
      24%, 32%, 40% { transform: rotate(-3deg) translateY(2px); }
    }
    @keyframes forge-progress-grow {
      0%, 20%, 23% { width: 14%; }
      26%, 30% { width: 38%; }
      34%, 38% { width: 62%; }
      42%, 94% { width: 88%; }
      100% { width: 14%; }
    }
    @media (max-width: 820px) { .hero-inner { grid-template-columns: 1fr; } .hero-art { max-width: 340px; margin: 0 auto; } }

    .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; }
    .hub { padding: clamp(40px, 6vh, 76px) 32px; position: relative; width: 100%; }
    .hub-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; }
    .hub-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 18px; display: flex; flex-direction: column; gap: 10px; }
    .hub-card svg { color: var(--accent); }
    .hub-card:nth-child(even) svg { color: var(--accent2); }
    .hub-card h3 { font-size: 15.5px; margin: 0; font-weight: 700; color: var(--text); }
    .hub-card p { font-size: 13.3px; line-height: 1.5; color: var(--text-4); margin: 0; flex: 1; }
    .hub-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.8px; font-weight: 600; }
    .hub-link svg { width: 13px; height: 13px; }
    @media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }

    .process-grid, .services-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; }
    .services-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    @media (max-width: 900px) { .process-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 560px) { .process-grid, .services-grid { grid-template-columns: 1fr; } }

    .step-card, .service-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 18px; }
    .step-num { font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 14px; }
    .step-card svg, .service-card svg { color: var(--accent); margin-bottom: 14px; }
    .step-card:nth-child(even) .step-num, .step-card:nth-child(even) svg { color: var(--accent2); }
    .service-card:nth-child(even) svg { color: var(--accent2); }
    .step-card h3, .service-card h3 { font-size: 15.5px; margin: 0 0 8px; font-weight: 700; color: var(--text); }
    .step-card p, .service-card p { font-size: 13.3px; line-height: 1.5; color: var(--text-4); margin: 0; }

    .portfolio-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
    @media (max-width: 820px) { .portfolio-grid { grid-template-columns: 1fr; } }
    .mock-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    .mock-browser { background: var(--bg); padding: 10px 14px; display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
    .mock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-light); }
    .mock-shot { display: block; width: 100%; height: auto; }
    .mock-label { padding: 16px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
    .mock-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); }
    .mock-card:nth-child(even) .mock-tag { color: var(--accent2); }
    .mock-label b { font-size: 14.5px; color: var(--text); }
    .mock-label p { font-size: 12.5px; color: var(--text-4); margin: 0; line-height: 1.45; }
    .mock-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.8px; font-weight: 600; margin-top: 4px; }
    .mock-link svg { width: 13px; height: 13px; }

    .pricing-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
    @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
    .price-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 30px 26px; display: flex; flex-direction: column; position: relative; }
    .price-card.popular { border-color: var(--accent); }
    .badge { position: absolute; top: -13px; left: 26px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
    .price-card h3 { font-size: 19px; margin: 0 0 4px; font-weight: 800; color: var(--text); }
    .price-card .sub { font-size: 13.3px; color: var(--text-4); margin: 0 0 18px; }
    .price-tag { font-size: 25px; font-weight: 800; margin: 0 0 4px; color: var(--text); }
    .ph { background: var(--border); padding: 2px 8px; border-radius: 6px; }
    .price-tag .ph { font-size: 0.62em; vertical-align: 2px; }
    .price-term { font-size: 12.3px; color: var(--text-5); margin: 0 0 22px; }
    .price-features { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
    .price-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.3px; color: var(--text-2); line-height: 1.4; }
    .price-features svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
    .pricing-note { max-width: 1180px; margin: 22px auto 0; font-size: 13px; color: var(--text-5); text-align: center; line-height: 1.5; }

    .contact-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.8fr); gap: 44px; }
    @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
    .form { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
    .field label { display: block; font-size: 12.3px; font-weight: 600; margin-bottom: 6px; color: var(--text-3); }
    .field input, .field textarea { width: 100%; background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: 8px; padding: 12px 14px; font-family: 'Rubik', sans-serif; font-size: 14px; color: var(--text); }
    .field textarea { min-height: 96px; resize: vertical; }
    .contacts-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; height: fit-content; }
    .contacts-card h3 { font-size: 16px; margin: 0 0 4px; font-weight: 700; color: var(--text); }
    .contacts-card > p { font-size: 13.3px; color: var(--text-4); margin: 0 0 6px; line-height: 1.5; }
    .contact-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
    .contact-row svg { color: var(--accent); flex-shrink: 0; }
    .contact-row:nth-child(3) svg { color: var(--accent2); }

    .footer { padding: 40px 32px; border-top: 1px solid var(--border); }
    .footer-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
    .footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
    .footer-links a { font-size: 13.3px; color: var(--text-4); }
    .footer small { color: var(--text-6); font-size: 12.3px; }

    .scroll-top { position: fixed; bottom: 26px; right: 26px; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6); z-index: 40; }
    .scroll-top:hover { filter: brightness(1.12); }
    .scroll-top svg { width: 20px; height: 20px; }
    @media (max-width: 480px) { .scroll-top { bottom: 16px; right: 16px; width: 42px; height: 42px; } }