:root {
      --blue:#0057ff; --blue2:#003cdb; --electric:#004cff; --yellow:#ffcc00; --green:#08bf35; --purple:#6d28d9; --dark:#050b22; --muted:#5b6380; --card:#ffffff; --soft:#f4f7ff; --line:#dfe7ff;
      --radius:26px; --shadow:0 22px 55px rgba(0,34,145,.14);
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--dark); background:#fff; overflow-x:hidden; }
    a { color:inherit; text-decoration:none; }
    img { max-width:100%; display:block; }
    .wrap { width:min(1180px, calc(100% - 36px)); margin-inline:auto; }
    .topbar { position:sticky; top:0; z-index:50; backdrop-filter: blur(18px); background:rgba(255,255,255,.86); border-bottom:1px solid rgba(0,87,255,.12); }
    .topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; }
    .brand { display:flex; gap:10px; align-items:center; font-weight:900; letter-spacing:-.04em; }
    .brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; box-shadow:0 10px 22px rgba(0,87,255,.28); position:relative; }
    .brand-mark::after { content:""; position:absolute; right:7px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--yellow); }
    .brand small { display:block; font-size:12px; letter-spacing:.02em; color:var(--muted); font-weight:700; }
    .top-actions { display:flex; gap:10px; align-items:center; }
    .pill-btn { border:1px solid var(--line); background:#fff; color:var(--dark); padding:11px 16px; border-radius:999px; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.04); }
    .cta { background:linear-gradient(135deg,#07b733,#00d64a); color:#fff; border-radius:999px; padding:13px 19px; font-weight:900; box-shadow:0 14px 28px rgba(0,190,70,.25); display:inline-flex; gap:9px; align-items:center; }
    .top-actions .cta { background:var(--electric); color:#fff; box-shadow:0 14px 28px rgba(0,87,255,.28); }
    .top-actions .pill-btn:hover, .top-actions .cta:hover { filter:brightness(.98); transform:translateY(-1px); }
    .hero { position:relative; background:radial-gradient(circle at 72% 24%, rgba(0,87,255,.16), transparent 34%), linear-gradient(180deg,#fff 0%,#f6f9ff 100%); padding:64px 0 34px; }
    .hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(#8fb1ff 1.2px, transparent 1.2px); background-size:24px 24px; opacity:.28; mask-image:linear-gradient(90deg,transparent,black 22%,black 70%,transparent); pointer-events:none; }
    .hero-grid { position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:38px; align-items:center; }
    .kicker { display:inline-flex; align-items:center; gap:9px; background:var(--blue); color:#fff; padding:10px 16px; border-radius:999px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; box-shadow:0 12px 22px rgba(0,87,255,.18); }
    h1 { font-size:clamp(42px, 7vw, 86px); line-height:.92; letter-spacing:-.07em; margin:18px 0 20px; }
    .blue-text { color:var(--blue); } .yellow-text { color:var(--yellow); text-shadow:0 2px 0 rgba(0,0,0,.05); }
    .lead { font-size:clamp(17px,2.1vw,22px); line-height:1.35; color:#253057; max-width:720px; margin:0 0 26px; font-weight:650; }
    .hero-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

    .quick-social { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
    .social-btn { display:inline-flex; align-items:center; gap:12px; min-width:190px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px 14px; box-shadow:0 12px 22px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease; }
    .social-btn:hover { transform:translateY(-2px); box-shadow:0 18px 30px rgba(0,0,0,.10); }
    .social-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; }
    .social-icon svg { width:38px; height:38px; display:block; }
    .social-copy { display:grid; gap:2px; line-height:1.05; }
    .social-copy strong { font-size:16px; letter-spacing:-.02em; }
    .social-copy small { font-size:12px; font-weight:850; color:var(--muted); }
    .social-btn.fb .social-copy small { color:#1877f2; }
    .social-btn.ig .social-copy small { color:#c13584; }
    .social-btn.tt .social-copy small { color:#111827; }
    .social-btn.mail .social-copy small { color:#0057ff; }
    .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; max-width:630px; }
    .stat { background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px; box-shadow:var(--shadow); }
    .stat strong { display:block; font-size:28px; color:var(--blue); } .stat span { color:var(--muted); font-weight:750; font-size:13px; }
    .hero-visual { position:relative; min-height:520px; }
    .hero-blob { position:absolute; inset:36px 0 auto auto; width:78%; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple)); box-shadow:0 40px 80px rgba(0,87,255,.18); }
    .hero-mini-card { position:absolute; width:46%; border-radius:28px; overflow:hidden; background:#fff; box-shadow:0 24px 60px rgba(2,16,76,.24); border:8px solid #fff; transform:rotate(var(--r,0deg)); }
    .hero-mini-card:nth-child(2){ --r:-8deg; left:4%; top:58px; }
    .hero-mini-card:nth-child(3){ --r:5deg; right:2%; top:26px; }
    .hero-mini-card:nth-child(4){ --r:-3deg; left:16%; bottom:34px; }
    .hero-mini-card:nth-child(5){ --r:8deg; right:8%; bottom:72px; }
    .hero-mini-card span { position:absolute; left:12px; top:12px; background:var(--yellow); padding:7px 10px; border-radius:999px; font-weight:950; font-size:12px; }
    .catalog-nav { position:sticky; top:74px; z-index:40; padding:13px 0; background:rgba(255,255,255,.92); backdrop-filter: blur(16px); border-block:1px solid rgba(0,87,255,.1); }
    .nav-scroll { display:flex; gap:10px; overflow:auto; padding-bottom:3px; scrollbar-width:none; }
    .nav-scroll::-webkit-scrollbar{ display:none; }
    .cat-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid rgba(0,87,255,.18); border-radius:999px; background:var(--electric); font-weight:850; color:#fff; box-shadow:0 8px 18px rgba(0,87,255,.18); }
    .cat-chip:hover { border-color:var(--blue2); color:#fff; filter:brightness(.98); }
    .tools { padding:28px 0 10px; }
    .search-box { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:10px 14px; box-shadow:0 12px 32px rgba(0,45,170,.08); max-width:680px; }
    .search-box input { border:0; outline:0; width:100%; font-size:16px; padding:10px; font-weight:650; }
    .category-section { padding:62px 0 20px; }
    .section-head { display:grid; gap:10px; margin-bottom:24px; }
    .section-kicker { color:var(--blue); font-weight:950; text-transform:uppercase; letter-spacing:.04em; }
    h2 { font-size:clamp(32px,4.5vw,58px); line-height:.98; letter-spacing:-.055em; margin:0; }
    .section-head p { margin:0; color:var(--muted); font-size:18px; font-weight:650; max-width:720px; }
    .service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
    .service-card { background:#fff; border:1px solid rgba(0,87,255,.12); border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 50px rgba(0,34,145,.10); transition:transform .22s ease, box-shadow .22s ease; }
    .service-card:hover { transform:translateY(-5px); box-shadow:0 28px 70px rgba(0,34,145,.18); }
    .service-image { display:block; aspect-ratio:1/1; position:relative; overflow:hidden; background:linear-gradient(135deg,#f3f7ff,#fff); }
    .service-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
    .service-card:hover .service-image img { transform:scale(1.035); }
    .code-badge { position:absolute; top:14px; left:14px; background:var(--yellow); color:#08122d; padding:8px 11px; border-radius:999px; font-weight:950; font-size:12px; box-shadow:0 12px 18px rgba(0,0,0,.10); }
    .service-content { padding:18px; }
    .service-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
    .service-code { color:#fff; background:var(--blue); border-radius:999px; padding:6px 10px; font-size:12px; font-weight:950; }
    .service-time { color:var(--purple); background:#f1eaff; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:900; }
    .service-card h3 { margin:0 0 9px; font-size:22px; line-height:1.03; letter-spacing:-.035em; }
    .service-card p { margin:0 0 12px; color:#52607d; line-height:1.42; font-weight:620; }
    .service-card ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
    .service-card li { position:relative; padding-left:22px; font-weight:720; font-size:14px; color:#1c2854; }
    .service-card li::before { content:"✓"; position:absolute; left:0; top:-1px; width:16px; height:16px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:10px; font-weight:900; }
    .card-bottom { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .card-bottom strong { font-size:23px; color:var(--blue); letter-spacing:-.04em; }
    .mini-cta { background:#07143b; color:#fff; border-radius:999px; padding:10px 14px; font-weight:900; }
    .contact { margin-top:70px; background:linear-gradient(135deg,var(--blue),#0036ba); color:#fff; padding:58px 0; border-radius:48px 48px 0 0; position:relative; overflow:hidden; }
    .contact::before { content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.12); }
    .contact-grid { position:relative; display:grid; grid-template-columns:1fr .8fr; gap:32px; align-items:center; }
    .contact h2 { color:#fff; } .contact p { color:#dfe8ff; font-size:18px; font-weight:650; }
    .contact-card { background:#fff; color:var(--dark); border-radius:30px; padding:22px; box-shadow:0 25px 70px rgba(0,0,0,.22); }
    .field { display:grid; gap:6px; margin-bottom:14px; }
    .field label { font-weight:900; color:#24305c; }
    .field input,.field textarea { width:100%; border:1px solid var(--line); border-radius:16px; padding:13px 14px; font:inherit; font-weight:650; outline:none; }
    .field textarea { min-height:92px; resize:vertical; }
    .submit { width:100%; border:0; cursor:pointer; justify-content:center; font-size:17px; }
    footer { padding:28px 0; background:#03123f; color:#c8d6ff; }
    footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-weight:700; }
    .hidden { display:none !important; }
    @media (max-width:980px) { .hero-grid,.contact-grid{ grid-template-columns:1fr; } .hero-visual{ min-height:470px; } .service-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .catalog-nav{ top:73px; } }
    @media (max-width:640px) { .wrap{ width:min(100% - 24px,1180px); } .top-actions .pill-btn{ display:none; } .hero{ padding-top:38px; } .stats{ grid-template-columns:1fr; } .hero-visual{ min-height:410px; } .hero-mini-card{ width:54%; border-width:5px; border-radius:20px; } .service-grid{ grid-template-columns:1fr; } .catalog-nav{ top:72px; } .contact{ border-radius:30px 30px 0 0; } .contact-links{ grid-template-columns:1fr; } .social-btn{ width:100%; } }