:root {
        --header-offset: 108px;
        --ink-900: #081428;
        --ink-700: #163252;
        --ink-500: #405976;
        --sky-500: #0ea5e9;
        --aqua-400: #2dd4bf;
        --amber-400: #f59e0b;
        --paper: #f8fbff;
        --white: #ffffff;
        --line: rgba(11, 18, 32, 0.09);
        --soft-shadow: 0 18px 45px rgba(8, 20, 45, 0.13);
        --hero-gradient:
          radial-gradient(circle at 10% 10%, #d8f5ff 0%, transparent 38%),
          radial-gradient(circle at 88% 90%, #d9fff5 0%, transparent 35%),
          linear-gradient(165deg, #f7fbff 0%, #e9f6ff 48%, #effcf8 100%);
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        color: var(--ink-900);
        font-family: "Sora", sans-serif;
        background: var(--paper);
        line-height: 1.6;
      }

      .site-shell {
        position: relative;
        overflow: hidden;
      }

      .site-shell::before,
      .site-shell::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        filter: blur(70px);
        z-index: -1;
      }

      .site-shell::before {
        top: -120px;
        left: -120px;
        width: 340px;
        height: 340px;
        background: rgba(14, 165, 233, 0.2);
      }

      .site-shell::after {
        right: -90px;
        top: 340px;
        width: 280px;
        height: 280px;
        background: rgba(45, 212, 191, 0.18);
      }

      .container {
        width: min(1140px, 92vw);
        margin: 0 auto;
      }

      .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 40;
        -webkit-backdrop-filter: blur(14px) saturate(130%);
        backdrop-filter: blur(14px) saturate(130%);
        background: rgba(245, 248, 255, 0.5);
        border-bottom: 1px solid rgba(11, 18, 32, 0.08);
        box-shadow: 0 8px 20px rgba(8, 20, 45, 0.08);
      }

      main {
        padding-top: var(--header-offset);
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 108px;
        gap: 16px;
      }

      .logo {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(11, 18, 32, 0.08);
        box-shadow: 0 4px 12px rgba(8, 20, 45, 0.08);
      }

      .logo img {
        display: block;
        height: 84px;
        width: auto;
        max-width: min(520px, 70vw);
        object-fit: contain;
        mix-blend-mode: normal;
        filter: contrast(1.08) saturate(1.04)
          drop-shadow(0 1px 2px rgba(8, 20, 45, 0.18));
      }

      .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.8);
        color: var(--ink-700);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        line-height: 1;
      }

      .menu {
        display: flex;
        align-items: center;
        gap: 22px;
      }

      .menu a {
        text-decoration: none;
        color: var(--ink-700);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
      }

      .menu a:hover {
        color: var(--sky-500);
      }

      .btn {
        border: 0;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 11px 19px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
      }

      .btn:hover {
        transform: translateY(-2px);
      }

      .btn-primary {
        color: var(--white);
        background: linear-gradient(110deg, #0284c7, #0ea5e9 52%, #2dd4bf);
        box-shadow: 0 12px 28px rgba(14, 165, 233, 0.35);
      }

      .btn-ghost {
        color: var(--ink-700);
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.8);
      }

      .hero {
        padding: 88px 0 62px;
        text-align: center;
        background:
          radial-gradient(ellipse 88% 52% at 50% -10%, rgba(14, 165, 233, 0.2) 0%, transparent 62%),
          radial-gradient(ellipse 52% 40% at 84% 104%, rgba(45, 212, 191, 0.16) 0%, transparent 52%),
          radial-gradient(ellipse 40% 34% at 10% 96%, rgba(56, 100, 200, 0.12) 0%, transparent 46%),
          linear-gradient(165deg, #0b2748 0%, #0c3a60 52%, #0d4e6e 100%);
      }

      .hero-inner {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .hero-eyebrow {
        color: #7dd3fc;
        background: rgba(14, 165, 233, 0.14);
        border-color: rgba(14, 165, 233, 0.3);
      }

      .hero h1 {
        margin: 16px 0 14px;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(2rem, 5.6vw, 3.7rem);
        line-height: 1.06;
        letter-spacing: -0.03em;
        color: #ecf7ff;
      }

      .hero-grad {
        background: linear-gradient(100deg, #7dd3fc 0%, #67e8f9 55%, #99f6e4 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero-sub {
        margin: 0;
        max-width: 58ch;
        color: rgba(218, 236, 252, 0.86);
        font-size: clamp(1rem, 2.1vw, 1.15rem);
        line-height: 1.72;
      }

      .hero-mark {
        background: rgba(125, 211, 252, 0.18) !important;
        color: #d6f0ff !important;
      }

      .hero-actions {
        margin-top: 24px;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
      }

      .btn-ghost-light {
        color: #ecf7ff;
        border: 1px solid rgba(236, 247, 255, 0.32);
        background: rgba(236, 247, 255, 0.12);
      }

      .btn-ghost-light:hover {
        background: rgba(236, 247, 255, 0.2);
        transform: translateY(-2px);
      }

      .hero-proof {
        margin-top: 32px;
        width: 100%;
        max-width: 680px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        border: 1px solid rgba(214, 233, 248, 0.25);
        border-radius: 18px;
        background: rgba(214, 233, 248, 0.1);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        padding: 16px 12px;
      }

      .proof-item {
        text-align: center;
        padding: 4px 22px;
      }

      .proof-item strong {
        display: block;
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.45rem;
        font-weight: 700;
        color: #f3fbff;
        line-height: 1.1;
      }

      .proof-item span {
        font-size: 0.76rem;
        color: rgba(215, 234, 250, 0.82);
        letter-spacing: 0.03em;
      }

      .proof-sep {
        width: 1px;
        height: 38px;
        background: rgba(214, 233, 248, 0.34);
        flex-shrink: 0;
      }

      section {
        padding: 68px 0;
        position: relative;
      }

      /* Defer heavy rendering for below-the-fold content. */
      main > section:not(.hero) {
        content-visibility: auto;
        contain-intrinsic-size: 1px 920px;
      }

      #about,
      #why-us,
      #work,
      #faq {
        background:
          radial-gradient(circle at 92% 12%, rgba(186, 230, 253, 0.35) 0%, transparent 30%),
          radial-gradient(circle at 8% 88%, rgba(153, 246, 228, 0.3) 0%, transparent 28%),
          linear-gradient(180deg, #fbfdff 0%, #f4faff 100%);
      }

      #services,
      #process {
        background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      }

      #contact {
        background:
          radial-gradient(ellipse at 10% 20%, rgba(14, 165, 233, 0.38) 0%, transparent 40%),
          radial-gradient(ellipse at 88% 80%, rgba(45, 212, 191, 0.34) 0%, transparent 40%),
          radial-gradient(ellipse at 50% 50%, rgba(2, 132, 199, 0.18) 0%, transparent 60%),
          linear-gradient(135deg, #0b2748 0%, #0c3a60 40%, #0d4e6e 70%, #0a3d56 100%);
        color: #e8f4ff;
      }

      #contact .section-head h2 {
        color: #ffffff;
      }

      #contact .section-head p {
        color: rgba(220, 240, 255, 0.85);
      }

      #contact .inquiry-info {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.14);
        color: #ddf0ff;
      }

      #contact .inquiry-info h3 {
        color: #ffffff;
      }

      #contact .inquiry-info p {
        color: rgba(220, 240, 255, 0.82);
      }

      #contact .inquiry-links a {
        color: #7dd3fc;
      }

      #contact .inquiry-links a:hover {
        color: #bae6fd;
      }

      #contact .inquiry-form {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
      }

      #contact .inquiry-form label {
        color: #bfdbfe;
      }

      #contact .inquiry-form input,
      #contact .inquiry-form select,
      #contact .inquiry-form textarea {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.18);
        color: #ffffff;
      }

      #contact .captcha-question {
        color: #d9edff;
      }

      #contact .captcha-help {
        color: rgba(220, 240, 255, 0.72);
      }

      #contact .form-feedback.is-error {
        color: #fecaca;
      }

      #contact .form-feedback.is-ok {
        color: #bbf7d0;
      }

      #contact .inquiry-form input::placeholder,
      #contact .inquiry-form textarea::placeholder {
        color: rgba(255, 255, 255, 0.4);
      }

      #contact .inquiry-form input:focus,
      #contact .inquiry-form select:focus,
      #contact .inquiry-form textarea:focus {
        border-color: rgba(125, 211, 252, 0.6);
        box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.18);
      }

      #contact .inquiry-form select option {
        background: #0c3a60;
        color: #ffffff;
      }

      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 20px;
        margin-bottom: 26px;
      }

      .section-head h2 {
        margin: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.5rem, 4.2vw, 2.5rem);
        line-height: 1.1;
        color: #0d2e52;
      }

      .section-head p {
        margin: 0;
        max-width: 60ch;
        color: #425b7a;
        font-size: 1rem;
      }

      .grid-4 {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .card {
        position: relative;
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfeff 100%);
        border: 1px solid rgba(14, 165, 233, 0.16);
        box-shadow: 0 10px 24px rgba(8, 20, 45, 0.08);
        padding: 22px;
        transition:
          transform 0.22s ease,
          box-shadow 0.22s ease,
          border-color 0.22s ease;
      }

      .card:hover {
        transform: translateY(-4px);
        border-color: rgba(14, 165, 233, 0.35);
        box-shadow: 0 16px 32px rgba(14, 165, 233, 0.14);
      }

      .card h3 {
        margin: 8px 0 8px;
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.06rem;
        color: #123759;
      }

      .card p {
        margin: 0;
        color: #435d7b;
        font-size: 0.94rem;
        line-height: 1.65;
      }

      .card-index {
        display: inline-flex;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        color: #0369a1;
        background: rgba(14, 165, 233, 0.14);
        font-weight: 700;
      }

      .process-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .process-step {
        border-left: 3px solid rgba(14, 165, 233, 0.3);
      }

      .cases {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .work-projects {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .project-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .project-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .project-outcome {
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 3px 10px;
        border-radius: 999px;
      }

      .outcome-green {
        color: #065f46;
        background: rgba(16, 185, 129, 0.15);
      }

      .outcome-blue {
        color: #0369a1;
        background: rgba(14, 165, 233, 0.14);
      }

      .project-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px solid rgba(14, 165, 233, 0.1);
      }

      .project-stack span {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 999px;
        color: #0369a1;
        background: rgba(14, 165, 233, 0.1);
        letter-spacing: 0.03em;
      }

      .testimonials-head {
        margin: 36px 0 16px;
      }

      .testimonials-head h3 {
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.3rem;
        color: #0d2e52;
        margin: 0;
      }

      .testimonials {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .testimonial-card {
        border-radius: 16px;
        padding: 24px;
        background: linear-gradient(145deg, #ffffff 0%, #f0f8ff 100%);
        border: 1px solid rgba(14, 165, 233, 0.16);
        box-shadow: 0 8px 20px rgba(8, 20, 45, 0.07);
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .stars {
        color: #f59e0b;
        font-size: 1rem;
        letter-spacing: 2px;
      }

      .testimonial-card blockquote {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.7;
        color: #2d4a66;
        font-style: italic;
        flex: 1;
      }

      .testimonial-card footer {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-top: 10px;
        border-top: 1px solid rgba(14, 165, 233, 0.1);
      }

      .testimonial-card footer strong {
        font-size: 0.88rem;
        color: #123759;
      }

      .testimonial-card footer span {
        font-size: 0.78rem;
        color: #5a7a9a;
      }

      .team-grid {
        display: grid;
        gap: 18px;
        grid-template-columns: 1.2fr 0.8fr;
      }

      .team-panel {
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
        border: 1px solid rgba(14, 165, 233, 0.16);
        box-shadow: 0 10px 24px rgba(8, 20, 45, 0.08);
        padding: 24px;
      }

      .team-panel h3 {
        color: #123759;
      }

      .team-panel p {
        color: #435d7b;
      }

      .why-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .faq-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .faq-card h3 {
        margin-top: 0;
      }

      .case-tag {
        display: inline-block;
        margin-bottom: 10px;
        border-radius: 999px;
        padding: 5px 11px;
        font-size: 0.76rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #8a5200;
        background: rgba(245, 158, 11, 0.26);
      }

      mark.hl {
        background: rgba(14, 165, 233, 0.14);
        color: #0b4f80;
        font-weight: 600;
        padding: 1px 5px;
        border-radius: 5px;
        font-style: normal;
      }

      .quote {
        position: relative;
        margin-top: 24px;
        border-radius: 16px;
        padding: 28px;
        border: 1px solid rgba(11, 18, 32, 0.08);
        background: linear-gradient(120deg, #ffffff, #f0fbff);
      }

      .quote::before {
        content: "\201C";
        position: absolute;
        top: -22px;
        left: 18px;
        color: rgba(2, 132, 199, 0.35);
        font-size: 74px;
        font-family: "Space Grotesk", sans-serif;
      }

      .cta {
        border-radius: 22px;
        padding: 36px;
        color: var(--white);
        background: linear-gradient(
          130deg,
          #0284c7 0%,
          #0ea5e9 38%,
          #22c1d6 68%,
          #2dd4bf 100%
        );
        box-shadow: 0 20px 40px rgba(14, 165, 233, 0.32);
      }

      .cta h2 {
        margin: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.5rem, 4.4vw, 2.2rem);
      }

      .cta p {
        margin: 10px 0 0;
        max-width: 50ch;
        color: rgba(255, 255, 255, 0.9);
      }

      .cta-actions {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .cta .btn-primary {
        background: #ffffff;
        color: #0369a1;
        box-shadow: none;
      }

      .cta .btn-ghost {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.08);
      }

      .inquiry-wrap {
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        gap: 18px;
        align-items: start;
      }

      .inquiry-info {
        padding: 24px;
      }

      .inquiry-info h3 {
        margin: 8px 0;
      }

      .inquiry-links {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .contact-points {
        margin-top: 14px;
        display: grid;
        gap: 8px;
      }

      .contact-points p {
        margin: 0;
        color: inherit;
        font-size: 0.9rem;
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }

      .contact-icon {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 12px;
        line-height: 1;
        background: rgba(125, 211, 252, 0.16);
        border: 1px solid rgba(125, 211, 252, 0.34);
      }

      .contact-points strong {
        color: #ffffff;
        margin-right: 4px;
      }

      .contact-points a {
        color: #7dd3fc;
        text-decoration: none;
        font-weight: 600;
      }

      .contact-points a:hover {
        color: #bae6fd;
      }

      .inquiry-links a {
        text-decoration: none;
        color: #0369a1;
        font-weight: 600;
      }

      .inquiry-links a:hover {
        color: #0c4a6e;
      }

      .inquiry-form {
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        border: 1px solid rgba(14, 165, 233, 0.18);
        box-shadow: 0 10px 24px rgba(8, 20, 45, 0.08);
        padding: 24px;
        display: grid;
        gap: 10px;
      }

      .inquiry-form label {
        margin-top: 4px;
        font-size: 0.88rem;
        font-weight: 600;
        color: #173c61;
      }

      .inquiry-form input,
      .inquiry-form select,
      .inquiry-form textarea {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(11, 18, 32, 0.14);
        background: #ffffff;
        padding: 12px 14px;
        font: inherit;
        color: #123759;
      }

      .inquiry-form textarea {
        resize: vertical;
        min-height: 120px;
      }

      .captcha-wrap {
        margin-top: 6px;
        display: grid;
        gap: 8px;
      }

      .captcha-question {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #0f3a61;
      }

      .captcha-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
      }

      .captcha-refresh {
        min-width: 96px;
        padding-inline: 14px;
      }

      .captcha-help {
        color: #4f6e8d;
        font-size: 0.78rem;
      }

      .form-feedback {
        margin: 4px 0 0;
        min-height: 20px;
        font-size: 0.82rem;
        font-weight: 600;
      }

      .form-feedback.is-error {
        color: #b91c1c;
      }

      .form-feedback.is-ok {
        color: #0f766e;
      }

      .inquiry-form .input-invalid {
        border-color: rgba(220, 38, 38, 0.65) !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16) !important;
      }

      .inquiry-form input:focus,
      .inquiry-form select:focus,
      .inquiry-form textarea:focus {
        outline: none;
        border-color: rgba(14, 165, 233, 0.52);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
      }

      .inquiry-form .btn {
        margin-top: 8px;
        justify-self: start;
      }

      footer {
        padding: 34px 0 42px;
        color: var(--ink-700);
      }

      .footer-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .footer-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .footer-logo {
        display: inline-flex;
        align-items: center;
      }

      .footer-logo img {
        display: block;
        height: 36px;
        width: auto;
        object-fit: contain;
      }

      .footer-links {
        display: flex;
        gap: 14px;
      }

      .footer-links a {
        color: var(--ink-700);
        text-decoration: none;
      }

      .footer-links a:hover {
        color: var(--sky-500);
      }

      .reveal-up {
        opacity: 0;
        animation: revealUp 0.8s ease forwards;
      }

      .reveal-up-delay-1 {
        animation-delay: 0.1s;
      }

      .reveal-up-delay-2 {
        animation-delay: 0.24s;
      }

      .reveal-up-delay-3 {
        animation-delay: 0.38s;
      }

      .stagger .card {
        opacity: 0;
        animation: revealUp 0.8s ease forwards;
      }

      .stagger .card:nth-child(1) {
        animation-delay: 0.08s;
      }

      .stagger .card:nth-child(2) {
        animation-delay: 0.2s;
      }

      .stagger .card:nth-child(3) {
        animation-delay: 0.32s;
      }

      .stagger .card:nth-child(4) {
        animation-delay: 0.44s;
      }

      @keyframes revealUp {
        from {
          opacity: 0;
          transform: translateY(18px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes floatGlow {
        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-8px);
        }
      }

      @media (max-width: 1024px) {
        .grid-4 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cases {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .work-projects,
        .testimonials,
        .faq-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .team-grid,
        .why-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 900px) {
        :root {
          --header-offset: 82px;
        }

        .header {
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
          background: rgba(245, 248, 255, 0.95);
        }

        .site-shell::before,
        .site-shell::after {
          filter: blur(34px);
        }

        .hero-proof {
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
        }

        .logo img {
          filter: none;
        }

        .process-grid {
          grid-template-columns: 1fr;
        }

        .inquiry-wrap {
          grid-template-columns: 1fr;
        }

        .hero h1 {
          line-height: 1.08;
        }

        .hero-sub,
        .section-head p,
        .card p,
        .team-panel p,
        .cta p {
          font-size: 0.98rem;
          line-height: 1.7;
        }

        .hero {
          padding: 66px 0 48px;
        }

        .hero h1 {
          font-size: clamp(2rem, 8vw, 3rem);
        }

        .proof-sep {
          display: none;
        }

        .hero-proof {
          gap: 4px;
        }

        .proof-item {
          padding: 8px 16px;
        }

        .nav {
          min-height: 82px;
          position: relative;
        }

        .logo img {
          height: 60px;
          max-width: min(360px, 66vw);
        }

        .logo {
          padding: 4px 8px;
          border-radius: 12px;
        }

        .menu-toggle {
          display: inline-flex;
        }

        .menu {
          position: absolute;
          top: calc(100% + 6px);
          left: 0;
          right: 0;
          background: rgba(255, 255, 255, 0.97);
          border: 1px solid var(--line);
          border-radius: 14px;
          box-shadow: 0 16px 30px rgba(8, 20, 45, 0.16);
          padding: 12px;
          flex-direction: column;
          align-items: stretch;
          gap: 8px;
          opacity: 0;
          transform: translateY(-6px);
          pointer-events: none;
          transition:
            opacity 0.25s ease,
            transform 0.25s ease;
        }

        .menu a {
          font-size: 14px;
          padding: 10px 12px;
          border-radius: 10px;
        }

        .menu a:hover {
          background: rgba(14, 165, 233, 0.1);
        }

        .header.menu-open .menu {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }
      }

      @media (max-width: 640px) {
        .nav {
          padding: 14px 0;
        }

        .logo img {
          height: 50px;
          max-width: 72vw;
        }

        .logo {
          padding: 3px 6px;
          border-radius: 10px;
        }

        .btn {
          min-height: 44px;
          padding: 12px 18px;
          font-size: 14px;
        }

        .hero {
          padding: 52px 0 36px;
        }

        .hero-proof {
          flex-direction: column;
          align-items: stretch;
        }

        .proof-item {
          padding: 10px 20px;
        }

        .hero-actions,
        .cta-actions {
          gap: 10px;
        }

        .hero-actions .btn,
        .cta-actions .btn,
        .inquiry-form .btn,
        .captcha-refresh {
          width: 100%;
        }

        .captcha-row {
          grid-template-columns: 1fr;
        }

        .hero-actions .btn-primary,
        .cta-actions .btn-primary,
        .inquiry-form .btn-primary {
          box-shadow: 0 14px 30px rgba(14, 165, 233, 0.34);
        }

        .hero-actions .btn-ghost,
        .hero-actions .btn-ghost-light,
        .cta-actions .btn-ghost {
          background: transparent;
          border-color: rgba(22, 50, 82, 0.28);
          color: rgba(22, 50, 82, 0.9);
          font-weight: 500;
        }

        .hero-sub,
        .section-head p,
        .card p,
        .team-panel p,
        .cta p {
          font-size: 0.96rem;
          line-height: 1.72;
        }

        .section-head h2 {
          font-size: clamp(1.35rem, 7.6vw, 1.95rem);
        }

        .card,
        .team-panel,
        .inquiry-form,
        .inquiry-info {
          padding: 20px;
        }

        .stat {
          min-width: 100%;
        }

        .hero-actions .btn {
          width: 100%;
        }

        .grid-4,
        .cases,
        .work-projects,
        .testimonials,
        .faq-grid {
          grid-template-columns: 1fr;
        }

        .section-head {
          margin-bottom: 20px;
        }

        .footer-row,
        .footer-brand,
        .footer-links {
          justify-content: center;
        }

        .footer-brand {
          flex-direction: column;
          text-align: center;
          width: 100%;
        }

        section {
          padding: 52px 0;
        }
      }

      @media (max-width: 420px) {
        .container {
          width: min(1140px, 94vw);
        }

        .menu a {
          font-size: 13px;
        }

        .hero h1 {
          font-size: clamp(1.7rem, 10vw, 2.2rem);
        }

        .eyebrow {
          font-size: 11px;
          letter-spacing: 0.08em;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        .reveal-up,
        .stagger .card {
          animation: none;
          opacity: 1;
        }

        .btn,
        .card,
        .menu {
          transition: none;
        }
      }