:root {
      --navy: #0a1d3d;
      --navy-2: #10294f;
      --navy-3: #183b6e;
      --red: #ad0926;
      --red-soft: #fff0f2;
      --white: #ffffff;
      --page: #fbfcfe;
      --subtle: #f4f7fb;
      --line: #e5eaf1;
      --muted: #65738a;
      --heading: #14233c;
      --shadow: 0 28px 70px rgba(15, 39, 75, .095);
      --r: 17px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 100px; }
    body { margin: 0; color: var(--heading); background: var(--white); font-family: Inter, 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    ::selection { background: #f5c8d1; color: var(--navy); }
    :focus-visible { outline: 3px solid #e74d69; outline-offset: 4px; }
    .container { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
    .section { padding: 104px 0; }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
    .eyebrow::before { content: ''; width: 20px; height: 2px; background: currentColor; border-radius: 3px; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { letter-spacing: -.046em; }
    h2 { font-size: clamp(33px, 3.5vw, 46px); line-height: 1.16; font-weight: 780; color: var(--navy); margin: 20px 0 18px; }
    .section-desc { color: var(--muted); max-width: 580px; font-size: 16px; line-height: 1.8; }
    .btn { min-height: 50px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; font-size: 13px; font-weight: 750; line-height: 1.1; border: 1px solid transparent; padding: 0 21px; transition: transform .22s, background .22s, border-color .22s, box-shadow .22s; }
    .btn:hover { transform: translateY(-2px); }
    .btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
    .btn-primary { color: white; background: var(--red); box-shadow: 0 8px 18px rgba(173, 9, 38, .13); }
    .btn-primary:hover { background: #930820; box-shadow: 0 11px 23px rgba(173, 9, 38, .19); }
    .btn-outline { background: white; color: var(--navy); border-color: #d6dce7; }
    .btn-outline:hover { border-color: var(--navy); background: #f6f8fc; }
    .btn-white { color: var(--navy); background: white; }
    .btn-white:hover { background: #f0f3f9; }

    /* Header */
    .site-header { position: relative; z-index: 30; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #edf0f6; }
    .header-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
    .brand { display: flex; align-items: center; flex: 0 0 auto; }
    .brand img { width: 154px; height: auto; display: block; }
    .nav-group { display: flex; align-items: center; gap: 34px; margin-left: auto; }
    .nav-links { display: flex; align-items: center; gap: 32px; }
    .nav-links a { font-size: 13px; font-weight: 650; color: #4c5b70; transition: color .2s; }
    .nav-links a:hover { color: var(--red); }
    .header-cta { min-height: 45px; padding-inline: 18px; font-size: 12px; }
    .hamburger { display: none; border: 1px solid var(--line); width: 44px; height: 44px; border-radius: 10px; background: white; align-items: center; justify-content: center; color: var(--navy); }
    .hamburger svg { width: 21px; height: 21px; }

    /* Hero */
    .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff 71%, #fafdff 100%); }
    .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .43; background: radial-gradient(circle at 95% 24%, #f8e8ed 0, transparent 27%), radial-gradient(circle at 60% 100%, #eff5ff 0, transparent 34%); }
    .hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: 37px; min-height: 628px; padding-top: 65px; padding-bottom: 80px; }
    .hero-content { position: relative; z-index: 2; }
    .hero-pill { width: fit-content; display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; background: #fff3f5; color: #9b1230; border: 1px solid #f8dfe5; border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .10em; text-transform: uppercase; }
    .hero-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px #f8dce3; }
    h1 { color: var(--navy); font-size: clamp(43px, 4.6vw, 64px); line-height: 1.11; font-weight: 810; max-width: 630px; margin: 23px 0 22px; }
    h1 span { color: var(--red); }
    .hero-copy { max-width: 495px; color: #5e6b80; font-size: 15.5px; line-height: 1.95; margin-bottom: 29px; }
    .hero-actions { display: flex; gap: 11px; flex-wrap: wrap; }
    .hero-notes { display: flex; gap: 24px; margin-top: 43px; flex-wrap: wrap; }
    .hero-note { display: inline-flex; gap: 9px; align-items: center; font-size: 11px; font-weight: 660; color: #718097; }
    .hero-note svg { color: var(--red); width: 16px; height: 16px; }

    /* Product artwork — intentionally a concept UI, not a real client's work */
    .hero-art { position: relative; isolation: isolate; padding: 24px 0 10px 7px; }
    .hero-art::before { content: ''; position: absolute; width: 425px; height: 425px; right: -28px; top: -39px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, #e6ecf8 0, #f2f5fb 55%, transparent 71%); }
    .art-dots { position: absolute; width: 150px; height: 160px; right: -10px; bottom: -25px; opacity: .46; background-image: radial-gradient(#b4c4dc 1.1px, transparent 1.1px); background-size: 13px 13px; z-index: -1; }
    .browser { overflow: hidden; border: 1px solid #d9e1ed; border-radius: 16px; background: white; transform: rotate(-2deg); box-shadow: 0 35px 65px rgba(10, 29, 61, .19), 0 3px 10px rgba(10, 29, 61, .06); }
    .browser-top { height: 40px; display: flex; align-items: center; gap: 5px; padding: 0 15px; border-bottom: 1px solid #e8edf4; background: #f8fafd; }
    .browser-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4dbe5; }
    .browser-dot:first-child { background: #ef9ea9; }
    .browser-dot:nth-child(2) { background: #f1c98d; }
    .browser-dot:nth-child(3) { background: #99c7b8; }
    .browser-url { margin-left: 27px; height: 20px; width: 170px; border: 1px solid #e8edf4; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 670; letter-spacing: .02em; color: #94a1b4; background: white; }
    .app-screen { display: grid; grid-template-columns: 112px 1fr; min-height: 311px; }
    .app-sidebar { padding: 19px 11px; background: #0d2548; color: #dce8fa; }
    .side-logo { font-weight: 900; color: white; font-size: 14px; letter-spacing: -.07em; margin: 0 0 27px 8px; }
    .side-logo b { color: #f3627b; }
    .side-item { display: flex; align-items: center; gap: 8px; height: 29px; margin-bottom: 7px; border-radius: 5px; padding: 0 7px; color: #8196b5; font-size: 7px; font-weight: 650; }
    .side-item.active { color: white; background: #274367; }
    .side-icon { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; flex: 0 0 auto; }
    .side-icon.circle { border-radius: 50%; }
    .app-content { min-width: 0; padding: 20px 19px; background: #fff; }
    .app-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 20px; }
    .app-head h3 { color: #10223d; font-size: 14px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 5px; }
    .app-head span { display: block; width: 106px; height: 5px; background: #e9eef4; border-radius: 4px; }
    .avatar { width: 27px; height: 27px; border-radius: 50%; background: #f4d7df; display: grid; place-items: center; color: var(--red); font-size: 9px; font-weight: 900; }
    .ui-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ui-card { padding: 13px 10px 10px; min-height: 73px; border: 1px solid #e8edf3; border-radius: 7px; background: #fff; }
    .ui-card label { display: block; width: 60%; height: 5px; border-radius: 4px; background: #dce4ee; margin: 0 0 12px; }
    .ui-card strong { display: block; font-size: 18px; letter-spacing: -.06em; color: #172a47; line-height: 1; }
    .ui-card small { display: block; color: #6ab090; margin-top: 7px; font-size: 6px; font-weight: 750; }
    .ui-lower { display: grid; grid-template-columns: 1.5fr .9fr; gap: 9px; margin-top: 10px; }
    .ui-panel { border: 1px solid #e8edf3; border-radius: 7px; background: white; min-height: 133px; padding: 12px 11px 8px; overflow: hidden; }
    .ui-panel-title { font-size: 8px; color: #20324e; font-weight: 850; margin: 0 0 10px; }
    .chart-bars { height: 86px; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; border-bottom: 1px solid #eef1f6; background: repeating-linear-gradient(to top, transparent 0, transparent 27px, #f4f6fa 28px); padding: 5px 3px 0; }
    .bar { flex: 1; max-width: 14px; border-radius: 3px 3px 0 0; background: #b7c9e4; }
    .bar.red { background: #bc1736; }
    .task { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #eff2f7; }
    .task:last-child { border: 0; }
    .task-check { width: 11px; height: 11px; border: 1.5px solid #d5dfeb; border-radius: 50%; flex: 0 0 auto; }
    .task-check.done { background: #dbf4e7; border-color: #67bf92; }
    .task-line { width: 90%; height: 5px; background: #e3e9f0; border-radius: 4px; }
    .task:nth-of-type(3) .task-line { width: 68%; }
    .floating-note { display: flex; gap: 11px; align-items: center; position: absolute; bottom: -9px; left: -33px; background: white; padding: 13px 15px; box-shadow: 0 12px 31px rgba(22, 44, 80, .15); border: 1px solid #edf0f5; border-radius: 11px; transform: rotate(2deg); }
    .float-icon { width: 36px; height: 36px; display: grid; place-items: center; background: #e8f6ee; border-radius: 9px; color: #278e5b; }
    .float-icon svg { width: 19px; height: 19px; }
    .floating-note strong { display: block; font-size: 10px; color: #17263d; margin: 0 0 4px; }
    .floating-note span { display: block; font-size: 8px; color: #8591a3; }
    .float-top { position: absolute; top: 4px; right: -15px; background: var(--navy); color: white; border-radius: 7px; transform: rotate(4deg); padding: 10px 14px; font-size: 9px; font-weight: 800; box-shadow: 0 8px 25px rgba(13, 32, 63, .15); }
    .float-top i { display: inline-block; width: 7px; height: 7px; background: #fa7894; border-radius: 50%; margin-right: 6px; }

    /* Focus areas */
    .focus-strip { border-block: 1px solid #edf1f6; background: #fff; }
    .focus-inner { display: flex; gap: 27px; align-items: center; min-height: 100px; justify-content: space-between; }
    .focus-caption { font-size: 11px; color: #8b96a7; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; line-height: 1.5; min-width: 150px; }
    .focus-list { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
    .focus-list span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 720; color: #344661; }
    .focus-list svg { width: 16px; height: 16px; color: var(--red); }

    /* Services */
    .services { background: var(--page); }
    .section-header { margin-bottom: 40px; }
    .section-header.split { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
    .section-header.split .section-desc { max-width: 390px; margin-bottom: 1px; }
    .section-header h2 { max-width: 540px; }
    .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .service-card { min-height: 285px; border: 1px solid #e7edf4; padding: 29px 24px; background: white; border-radius: 14px; transition: transform .24s, border-color .24s, box-shadow .24s; display: flex; flex-direction: column; }
    .service-card:hover { transform: translateY(-6px); border-color: #eab4c0; box-shadow: 0 18px 32px rgba(22, 43, 81, .08); }
    .service-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 13px; background: #f7e9ed; color: var(--red); margin-bottom: 24px; }
    .service-card:nth-child(even) .service-icon { background: #ecf1fa; color: #294f82; }
    .service-icon svg { width: 27px; height: 27px; }
    .service-card h3 { font-size: 18px; letter-spacing: -.035em; line-height: 1.3; margin: 0 0 11px; color: var(--navy); }
    .service-card p { font-size: 12.5px; line-height: 1.8; color: #788498; margin: 0; }
    .service-card .card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 22px; color: #c5ccd7; font-size: 11px; font-weight: 800; }
    .card-bottom svg { width: 16px; height: 16px; color: var(--red); }

    /* Why us */
    .why-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 93px; align-items: center; }
    .why-visual { background: var(--navy); border-radius: 18px; min-height: 445px; padding: 40px; color: white; position: relative; overflow: hidden; isolation: isolate; }
    .why-visual::before { content: ''; position: absolute; width: 365px; height: 365px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; right: -110px; bottom: -136px; z-index: -1; box-shadow: 0 0 0 54px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.02); }
    .why-visual .tiny-label { font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: #e58a9e; font-weight: 800; }
    .why-big { font-size: clamp(32px, 3vw, 42px); font-weight: 780; line-height: 1.22; letter-spacing: -.05em; max-width: 360px; margin: 51px 0 29px; }
    .why-big span { color: #fe8199; }
    .why-visual p { color: #bac7db; line-height: 1.85; max-width: 330px; font-size: 13px; }
    .why-sign { position: absolute; bottom: 38px; left: 40px; color: #e2e9f4; font-size: 12px; font-weight: 800; letter-spacing: .24em; }
    .why-copy h2 { max-width: 480px; }
    .why-copy .section-desc { margin-bottom: 29px; }
    .benefit { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
    .benefit-index { color: var(--red); font-size: 12px; font-weight: 900; margin-top: 4px; }
    .benefit h3 { color: var(--navy); font-size: 15px; letter-spacing: -.02em; margin: 0 0 6px; }
    .benefit p { color: #7a879a; font-size: 12px; line-height: 1.75; margin: 0; }

    /* Process */
    .process { background: #f6f8fc; }
    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 27px; margin-top: 47px; }
    .process-step { position: relative; }
    .process-step:not(:last-child)::after { content: ''; position: absolute; top: 25px; left: 66px; right: -12px; height: 1px; border-top: 1px dashed #becadb; }
    .step-circle { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #e5d0d7; background: #fff; color: var(--red); border-radius: 13px; font-size: 15px; font-weight: 900; box-shadow: 0 7px 20px rgba(12, 37, 74, .03); position: relative; z-index: 1; }
    .process-step h3 { color: var(--navy); font-size: 16px; margin: 24px 0 11px; letter-spacing: -.025em; }
    .process-step p { color: #7a879a; font-size: 12.5px; line-height: 1.78; max-width: 225px; }

    /* Solution examples */
    .examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .example { border: 1px solid #e6eaf0; border-radius: 14px; background: white; overflow: hidden; }
    .example-graphic { height: 214px; padding: 28px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .graphic-1 { background: linear-gradient(135deg, #edf3fc, #dae5f4); }
    .graphic-2 { background: linear-gradient(135deg, #fbf0f2, #f2dbe1); }
    .graphic-3 { background: linear-gradient(135deg, #ecf5f5, #dceced); }
    .mini-dash { position: relative; width: 245px; height: 146px; border-radius: 9px; box-shadow: 0 16px 32px rgba(20, 42, 76, .15); background: white; overflow: hidden; transform: rotate(-6deg) translateY(10px); display: grid; grid-template-columns: 54px 1fr; }
    .mini-dash aside { background: var(--navy); padding: 15px 10px; }
    .mini-dash aside i { display: block; width: 27px; height: 6px; background: #466087; border-radius: 5px; margin-bottom: 11px; }
    .mini-dash aside i:first-child { width: 18px; background: #e58ba1; margin-bottom: 20px; }
    .mini-dash main { padding: 19px 12px; }
    .mock-row { display: flex; gap: 6px; margin-bottom: 14px; }
    .mock-row div { width: 50%; height: 34px; border: 1px solid #ebeff5; border-radius: 4px; background: #fafdff; }
    .mock-chart { display: flex; gap: 9px; align-items: end; height: 54px; border-bottom: 1px solid #edf1f7; padding: 0 10px; }
    .mock-chart span { width: 12px; background: #8da5cc; height: 30%; border-radius: 2px 2px 0 0; }
    .mock-chart span:nth-child(2) { height: 70%; }
    .mock-chart span:nth-child(3) { height: 45%; background: var(--red); }
    .mock-chart span:nth-child(4) { height: 90%; }
    .mock-chart span:nth-child(5) { height: 64%; }
    .mock-chart span:nth-child(6) { height: 82%; background: var(--red); }
    .mini-calendar { width: 235px; height: 155px; background: white; border-radius: 12px; box-shadow: 0 17px 28px rgba(97, 40, 52, .14); padding: 19px; transform: rotate(5deg) translateY(8px); }
    .cal-title { height: 7px; background: #d7dce5; width: 67px; border-radius: 3px; margin-bottom: 17px; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
    .cal-grid span { width: 16px; height: 16px; border-radius: 4px; background: #f4f5f8; }
    .cal-grid span:nth-child(10), .cal-grid span:nth-child(18), .cal-grid span:nth-child(19) { background: var(--red); }
    .cal-grid span:nth-child(25) { background: #f0b3c0; }
    .mini-web { position: relative; width: 244px; height: 153px; background: white; border-radius: 9px; box-shadow: 0 17px 28px rgba(30, 75, 79, .14); transform: rotate(-5deg) translateY(8px); overflow: hidden; }
    .mini-web .web-nav { height: 24px; border-bottom: 1px solid #edf1f4; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
    .mini-web .web-nav b { font-size: 9px; color: var(--navy); }
    .mini-web .web-nav i { width: 67px; height: 4px; border-radius: 5px; background: #d6dfeb; }
    .mini-web .web-body { height: 128px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 14px; gap: 6px; background: #fafdfd; }
    .web-copy strong { display: block; width: 90%; height: 9px; background: var(--navy); border-radius: 3px; margin-bottom: 6px; }
    .web-copy strong:nth-child(2) { width: 60%; }
    .web-copy i { display: block; width: 95%; height: 4px; background: #cbd6df; margin: 13px 0 9px; border-radius: 2px; }
    .web-copy em { display: block; width: 48px; height: 13px; border-radius: 3px; background: var(--red); }
    .web-image { height: 93px; border-radius: 7px; background: linear-gradient(135deg, #6c9ba5, #1b4b5d); position: relative; overflow: hidden; }
    .web-image::before { content: ''; position: absolute; bottom: -23px; right: -14px; width: 90px; height: 90px; border: 17px solid rgba(255,255,255,.16); border-radius: 50%; }
    .example-content { padding: 23px 24px 24px; }
    .example-type { color: var(--red); font-size: 10px; text-transform: uppercase; letter-spacing: .11em; font-weight: 900; }
    .example h3 { margin: 8px 0 9px; color: var(--navy); font-size: 17px; }
    .example p { margin: 0; color: #758397; font-size: 12.5px; line-height: 1.8; }
    .example-note { display: block; color: #98a3b1; font-size: 11px; margin-top: 21px; }

    /* Contact */
    .contact { padding: 102px 0; background: var(--navy); color: white; position: relative; overflow: hidden; }
    .contact::before { content: ''; width: 580px; height: 580px; position: absolute; right: -230px; top: -190px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%; box-shadow: 0 0 0 73px rgba(255,255,255,.025), 0 0 0 146px rgba(255,255,255,.018); pointer-events: none; }
    .contact-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 95px; align-items: center; }
    .contact .eyebrow { color: #ed9aa9; }
    .contact h2 { color: white; font-size: clamp(34px, 3.7vw, 50px); max-width: 480px; }
    .contact h2 span { color: #fa7f96; }
    .contact-text { color: #afc1d9; line-height: 1.9; font-size: 14px; max-width: 410px; }
    .contact-points { margin-top: 37px; }
    .contact-points p { display: flex; align-items: center; gap: 12px; font-weight: 630; font-size: 12px; margin: 0 0 16px; color: #e5eaf3; }
    .contact-points svg { color: #ff9cb0; width: 16px; height: 16px; }
    .contact-form { color: var(--heading); border-radius: 17px; background: white; padding: 30px; box-shadow: 0 20px 45px rgba(0,0,0,.1); }
    .form-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
    .form-top h3 { color: var(--navy); font-size: 19px; margin: 0; }
    .form-top span { color: #ad0926; background: #fcebef; font-size: 10px; font-weight: 800; border-radius: 20px; padding: 6px 9px; }
    .form-fields { display: grid; gap: 16px; }
    .form-label { display: block; font-size: 11px; color: #384b65; font-weight: 750; margin-bottom: 7px; }
    .form-input { width: 100%; color: var(--navy); background: #fcfdff; border: 1px solid #dfe5ee; border-radius: 8px; padding: 11px 13px; min-height: 43px; outline: 0; font-size: 12px; }
    .form-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px #fae5e9; }
    .form-input::placeholder { color: #a4afbd; }
    textarea.form-input { resize: vertical; min-height: 93px; }
    .form-submit { width: 100%; margin-top: 19px; }
    .form-hint { font-size: 10.5px; line-height: 1.6; color: #97a2b2; text-align: center; margin: 12px 0 0; }
    .brief-output { display: none; margin-top: 18px; border: 1px solid #eed8dd; background: #fff8f9; border-radius: 9px; padding: 13px; white-space: pre-wrap; word-break: break-word; font-size: 11px; line-height: 1.7; color: #5a3240; }
    .brief-output.visible { display: block; }
    .form-status { min-height: 15px; margin-top: 9px; font-size: 11px; line-height: 1.6; color: #358154; }

    /* Footer */
    .footer { background: #07172e; color: #9daec8; padding: 36px 0; }
    .footer-inner { display: flex; justify-content: space-between; gap: 22px; align-items: center; }
    .footer-brand { color: white; font-size: 24px; font-weight: 900; letter-spacing: -.085em; line-height: 1.1; }
    .footer-brand span { color: #ee617e; }
    .footer-tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #b3bfd3; margin-top: 7px; }
    .footer-right { font-size: 11px; text-align: right; line-height: 1.8; }
    .footer-right a { color: #e6ebf4; }
    .footer-right a:hover { color: white; text-decoration: underline; }

    @media (max-width: 1090px) {
      .container { width: min(100% - 54px, 1200px); }
      .nav-links { gap: 18px; }
      .nav-group { gap: 19px; }
      .hero-inner { gap: 10px; }
      h1 { font-size: clamp(41px, 4.7vw, 57px); }
      .service-grid { grid-template-columns: repeat(2, 1fr); }
      .service-card { min-height: 250px; }
      .why-layout { gap: 44px; }
      .contact-layout { gap: 42px; }
      .hero-note { font-size: 10px; }
      .hero-notes { gap: 14px; }
    }
    @media (max-width: 800px) {
      .header-inner { min-height: 76px; }
      .brand img { width: 133px; }
      .hamburger { display: flex; }
      .nav-group { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 20px 27px 26px; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 25px 30px rgba(17, 37, 70, .12); }
      .nav-group.open { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
      .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
      .nav-links a { padding: 13px 4px; border-bottom: 1px solid #f1f3f7; }
      .header-cta { width: 100%; }
      .hero-inner { grid-template-columns: 1fr; padding-top: 65px; padding-bottom: 95px; gap: 51px; }
      .hero-content { max-width: 650px; }
      h1 { max-width: 670px; font-size: clamp(44px, 7vw, 65px); }
      .hero-art { max-width: 530px; width: min(100%, 530px); margin-inline: auto; }
      .focus-inner { flex-direction: column; align-items: flex-start; padding-block: 23px; gap: 17px; }
      .focus-list { justify-content: flex-start; gap: 17px 26px; }
      .why-layout { grid-template-columns: 1fr; gap: 47px; }
      .why-visual { min-height: 350px; }
      .why-big { margin-top: 35px; }
      .process-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
      .process-step::after { display: none; }
      .examples-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-layout { grid-template-columns: 1fr; gap: 37px; }
      .contact-copy { max-width: 620px; }
      .contact-form { max-width: 600px; width: 100%; }
      .section-header.split { flex-direction: column; align-items: flex-start; gap: 0; }
    }
    @media (max-width: 540px) {
      .container { width: calc(100% - 38px); }
      .section { padding: 78px 0; }
      h2 { font-size: 34px; }
      .hero-inner { padding-top: 47px; padding-bottom: 78px; gap: 42px; }
      h1 { font-size: clamp(38px, 10.3vw, 50px); margin-top: 20px; }
      .hero-copy { font-size: 13px; line-height: 1.9; }
      .hero-actions { gap: 10px; }
      .hero-actions .btn { padding-inline: 15px; font-size: 11px; }
      .hero-notes { gap: 12px 18px; margin-top: 29px; }
      .hero-note { font-size: 10px; }
      .hero-art { padding-inline: 0; }
      .browser { transform: rotate(-1deg); }
      .app-screen { grid-template-columns: 78px 1fr; min-height: 245px; }
      .app-sidebar { padding: 16px 5px; }
      .side-logo { font-size: 11px; margin: 0 0 18px 5px; }
      .side-item { gap: 5px; font-size: 6px; padding: 0 4px; margin-bottom: 4px; }
      .side-icon { width: 7px; height: 7px; }
      .app-content { padding: 15px 10px; }
      .app-head { margin-bottom: 11px; }
      .app-head h3 { font-size: 11px; }
      .ui-card { padding: 9px 6px; min-height: 58px; }
      .ui-card strong { font-size: 15px; }
      .ui-card small { font-size: 5px; }
      .ui-lower { grid-template-columns: 1fr .75fr; gap: 6px; }
      .ui-panel { padding: 9px 6px; min-height: 105px; }
      .ui-panel-title { font-size: 7px; }
      .chart-bars { height: 68px; }
      .bar { max-width: 10px; }
      .floating-note { left: -9px; bottom: -29px; padding: 9px 11px; }
      .float-icon { width: 30px; height: 30px; }
      .float-top { right: -4px; top: 0; }
      .service-grid, .examples-grid { grid-template-columns: 1fr; }
      .service-card { min-height: 239px; padding: 24px; }
      .service-icon { margin-bottom: 18px; }
      .why-visual { padding: 29px; min-height: 360px; }
      .why-sign { bottom: 27px; left: 29px; }
      .process-grid { gap: 23px; }
      .process-step p { font-size: 11px; }
      .process-step h3 { font-size: 14px; }
      .step-circle { width: 48px; height: 48px; }
      .contact { padding: 80px 0; }
      .contact-form { padding: 22px 19px; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
      .footer-right { text-align: left; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }