/* ─── Variables ─────────────────────────────────────── */
    :root {
      --duration: 6s;
      --wave-duration: calc(var(--duration) * 0.25);
      --text-in-delay: calc(var(--duration) * 0.275);
      --text-in-duration: calc(var(--duration) * 0.1);
      --easing: cubic-bezier(0.5, 0, 0.5, 1);
      --dot-color: #FF5A3D;
      --dot-color-dark: #d94829;
      cursor: default !important;
      user-select: none;
    }

    /* ─── Reset ─────────────────────────────────────────── */
    *, *::before, *::after {
      box-sizing: border-box;
      position: relative;
      margin: 0;
      padding: 0;
    }
    .noselect { user-select: none; }
    .d-flex{display:flex;}
    .service-card span{color: #ff5a3d; font-size: 1.6rem;}

    html { scroll-behavior: smooth; scrollbar-color: var(--dot-color) #0F1115; }

    body {
      background: #0F1115;
      color: #fff;
      font-family: "Heebo", sans-serif;
      overflow-x: hidden;
    }

    ::-moz-selection { 
    background-color: #383838; 
    color: #ffffff;
    }

    ::selection {
    background-color: #383838;
    color: #ffffff;
    }

    /* ─── Section 1 — Hero ──────────────────────────────── */
    .hero-section {
      height: 100svh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .container {
      display: grid;
      align-items: center;
      justify-items: center;
    }
    .container > * { grid-area: 1/1; }

    /* ─── Title ─────────────────────────────────────────── */
    .title {
      font-size: 11vmin;
      margin: 0;
      margin-left: -10%;
      z-index: 1;
    }
    .title .char {
      --delay: calc(var(--text-in-delay) + (0.25s * (1 - var(--distance-percent))));
      animation: text-in var(--text-in-duration) var(--easing) var(--delay) backwards;
      transform-origin: center 1em;
    }
    @-webkit-keyframes text-in {
      0% {
        opacity: 0;
        transform: translateX(calc(-0.4em * var(--char-offset))) scale(0);
      }
      90% {
        transform: translateX(0em) scale(1.1);
      }
    }
    @keyframes text-in {
      0% {
        opacity: 0;
        transform: translateX(calc(-0.4em * var(--char-offset))) scale(0);
      }
      90% {
        transform: translateX(0em) scale(1.1);
      }
    }
    .title .char[data-char=t], .title .char[data-char=i] {
      visibility: hidden;
      --squish-scale: 0.6;
      --squish-y: 10%;
    }
    .title .char[data-char=t]:before, .title .char[data-char=i]:before {
      -webkit-animation: text-squish var(--duration) var(--easing) forwards;
              animation: text-squish var(--duration) var(--easing) forwards;
      visibility: visible;
      transform-origin: center 1em;
    }
    .title .char[data-char=i] {
      --squish-scale: 0.9;
      --squish-y: 5%;
    }
    @-webkit-keyframes text-squish {
      47.5%, 52.5% {
        transform: none;
      }
      50% {
        transform: translateY(calc(var(--squish-y) * 1)) scaleY(calc(var(--squish-scale) * 1));
      }
    }
    @keyframes text-squish {
      47.5%, 52.5% {
        transform: none;
      }
      50% {
        transform: translateY(calc(var(--squish-y) * 1)) scaleY(calc(var(--squish-scale) * 1));
      }
    }
    .title .char:last-child {
      -webkit-animation: text-in var(--text-in-duration) var(--easing) var(--delay) backwards, text-bonk var(--duration) var(--easing) forwards;
              animation: text-in var(--text-in-duration) var(--easing) var(--delay) backwards, text-bonk var(--duration) var(--easing) forwards;
    }
    @-webkit-keyframes text-bonk {
      80%, 85%, to {
        transform: none;
      }
      82% {
        transform: translateX(-20%);
      }
    }
    @keyframes text-bonk {
      80%, 85%, to {
        transform: none;
      }
      82% {
        transform: translateX(-20%);
      }
    }

    .dot {
      font-size: 4.5vmin;
      width: 0.8em;
      height: 0.8em;
      -webkit-animation: dot var(--duration) var(--easing) both;
              animation: dot var(--duration) var(--easing) both;
    }

    .dot-inner {
      -webkit-animation: dot-inner var(--duration) var(--easing) both;
              animation: dot-inner var(--duration) var(--easing) both;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: grid;
      align-items: center;
      justify-items: center;
    }
    .dot-inner > * {
      grid-area: 1/1;
    }

    .dot-wave {
      width: 200%;
      height: 200%;
      fill: var(--dot-color);
      -webkit-animation: wave-in var(--wave-duration) var(--easing);
              animation: wave-in var(--wave-duration) var(--easing);
      --offset-x: -110%;
    }
    @-webkit-keyframes wave-in {
      0% {
        transform: translateY(100%) translateX(var(--offset-x));
      }
      70% {
        transform: translateY(30%) translateX(0%);
      }
    }
    @keyframes wave-in {
      0% {
        transform: translateY(100%) translateX(var(--offset-x));
      }
      70% {
        transform: translateY(30%) translateX(0%);
      }
    }
    .dot-wave.background {
      fill: var(--dot-color-dark);
      -webkit-animation-duration: calc(0.95 * var(--wave-duration));
              animation-duration: calc(0.95 * var(--wave-duration));
      --offset-x: 110%;
    }

    @-webkit-keyframes dot {
      from {
        opacity: 0;
        transform: scale(3);
      }
      10% {
        opacity: 1;
        transform: scale(3);
      }
      15% {
        transform: scale(3) translateY(0.5em) scaleY(1.5);
      }
      20% {
        transform: scale(1) translateY(-300%);
      }
      30% {
        transform: translateY(1em) scaleY(0.5);
      }
      40% {
        transform: translateY(-400%);
      }
      50% {
        transform: translateY(-1em);
      }
      53% {
        transform: translateY(-300%);
      }
      56% {
        transform: translateY(-1em);
      }
      59% {
        transform: translateY(-200%);
      }
      62% {
        transform: translateY(0.4em);
      }
      80%, 90%, to {
        transform: translateY(0.4em);
      }
    }

    @keyframes dot {
      from {
        opacity: 0;
        transform: scale(3);
      }
      10% {
        opacity: 1;
        transform: scale(3);
      }
      15% {
        transform: scale(3) translateY(0.5em) scaleY(1.5);
      }
      20% {
        transform: scale(1) translateY(-300%);
      }
      30% {
        transform: translateY(1em) scaleY(0.5);
      }
      40% {
        transform: translateY(-400%);
      }
      50% {
        transform: translateY(-1em);
      }
      53% {
        transform: translateY(-300%);
      }
      56% {
        transform: translateY(-1em);
      }
      59% {
        transform: translateY(-200%);
      }
      62% {
        transform: translateY(0.4em);
      }
      80%, 90%, to {
        transform: translateY(0.4em);
      }
    }
    @-webkit-keyframes dot-inner {
      from, 45% {
        transform: none;
      }
      70% {
        transform: translateX(6em);
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 0);
                animation-timing-function: cubic-bezier(0.5, 0, 1, 0);
      }
      80% {
        transform: translateX(3em);
        -webkit-animation-timing-function: var(--easing);
                animation-timing-function: var(--easing);
      }
      83%, to {
        transform: translateX(3.4em);
      }
    }
    @keyframes dot-inner {
      from, 45% {
        transform: none;
      }
      70% {
        transform: translateX(6.6em);
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 0);
                animation-timing-function: cubic-bezier(0.5, 0, 1, 0);
      }
      80% {
        transform: translateX(4.8em);
        -webkit-animation-timing-function: var(--easing);
                animation-timing-function: var(--easing);
      }
      83%, to {
        transform: translateX(5.2em);
      }
    }

    /*SLOGAN*/
    .slogan {
      font-size: 1.8vmin;
      letter-spacing: 0.22em;
      margin-top: 42%;
      opacity: 0.7;
      text-transform: uppercase;
      font-family:"Open Sans", "Poppins", "Questrial",  sans-serif;
    }

    /* wait until title finishes */
    .slogan .char {
      display: inline-block;

      /* delay starts AFTER title duration */
      --base-delay: 3s;
      --char-delay: calc(var(--char-index) * 0.03s);

      animation: slogan-in 0.6s ease-out
        calc(var(--base-delay) + var(--char-delay))
        both;
    }

    @keyframes slogan-in {
      from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }
    :root {
      --title-duration: 3s;
    }
    .slogan .char {
      --base-delay: var(--title-duration);
    }

    /* ─── Splitting required ─────────────────────────────── */
    .splitting .word, .splitting .char { display: inline-block; }
    .splitting .char { position: relative; }
    .splitting .char::before,
    .splitting .char::after {
      content: attr(data-char);
      position: absolute;
      top: 0; left: 0;
      visibility: hidden;
      transition: inherit;
      user-select: none;
    }
    .splitting {
      --word-center: calc((var(--word-total) - 1) / 2);
      --char-center: calc((var(--char-total) - 1) / 2);
      --line-center: calc((var(--line-total) - 1) / 2);
    }
    .splitting .word {
      --word-percent: calc(var(--word-index) / var(--word-total));
      --line-percent: calc(var(--line-index) / var(--line-total));
    }
    .splitting .char {
      --char-percent: calc(var(--char-index) / var(--char-total));
      --char-offset: calc(var(--char-index) - var(--char-center));
      --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));
      --distance-sine: calc(var(--char-offset) / var(--char-center));
      --distance-percent: calc(var(--distance) / var(--char-center));
    }

    /* ─── Explore button ─────────────────────────────────── */
    .explore-btn {
      position: absolute;
      bottom: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0px;
      background: transparent;
      /*border: 1.5px solid rgba(255,255,255,0.25);*/
      border: none;
      outline: none;
      box-shadow: none;
      border-radius: 50px;
      color: rgba(255,255,255,0.7);
      cursor: pointer;
      font-family: "Open Sans", sans-serif;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.85rem 1.5rem 0.65rem;
      transition: border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
      /*animation: btn-in 0.6s ease calc(var(--text-in-delay) + 1.2s) backwards;*/
      animation: MoveUpDown 2s ease infinite;
      z-index: 10;
    }
    /*@keyframes btn-in {
      from { opacity: 0; transform: translateX(-50%) translateY(12px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }*/
    @keyframes MoveUpDown {
      0%, 100% {
        bottom: 2%;
      }
      50% {
        bottom: 5%;
      }
    }
    .explore-btn:hover { border-color: var(--dot-color); }
    .explore-btn:hover .btn-icon { transform: translateY(3px); }
    .explore-btn.hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(8px) scale(0.92);
    }
    .btn-icon {
      display: block;
      font-size: 3rem;
      transition: transform 0.3s ease;
      line-height: 1;
    }

    /* ─── Dot spread overlay ─────────────────────────────── */
    .dot-overlay {
      position: fixed;
      top: 50%; left: 50%;
      width: 0; height: 0;
      border-radius: 50%;
      background: var(--dot-color);
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 100;
    }
    .dot-overlay.spreading {
      animation: dot-spread 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes dot-spread {
      0%   { width: 0;     height: 0;     opacity: 1; }
      60%  { width: 200vw; height: 200vw; opacity: 1; }
      80%  { width: 200vw; height: 200vw; opacity: 1; }
      100% { width: 200vw; height: 200vw; opacity: 0; }
    }

    /* ─── Section 2 ──────────────────────────────────────── */
    .second-section {
      min-height: 100svh;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5rem 2rem;
      opacity: 1;
      transform: translateY(30px);
    }
    .second-section.visible {
      animation: section2-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
      visibility: visible;
    }
    @keyframes section2-in {
  from { opacity: 0; visibility: visible; transform: translateY(30px); }
  to   { opacity: 1; visibility: visible; transform: translateY(0); }
}

    .second-content { max-width: 820px; width: 100%; }

    .second-dot-accent {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--dot-color);
      /*margin-bottom: 3vmin;*/
    }
    .second-section .second-dot-accent {
      animation: dot-pulse 2s ease 1.2s infinite alternate;
    }
    @keyframes dot-pulse {
      from { box-shadow: 0 0 0 0 rgba(255, 90, 61, 0.5); }
      to   { box-shadow: 0 0 0 14px rgba(255, 90, 61, 0); }
    }

    .second-header { margin-bottom: 5vmin; }

    .second-tag {
      font-family: "Open Sans", sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--dot-color);
      display: block;
      margin-bottom: 1.1rem;
    }
    .second-title {
      font-family: "Heebo", sans-serif;
      font-size: clamp(2.2rem, 6vw, 4.5rem);
      font-weight: 900;
      line-height: 1.05;
      color: #0f1115;
      margin-bottom: 1rem;
    }
    .accent { color: var(--dot-color); }
    .second-subtitle {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      font-size: 0.9rem;
      color: rgba(0,0,0,0.7);
      letter-spacing: 0.02em;
      line-height: 2em;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      margin-bottom: 4.5rem;
    }
    .service-card {
      /*background: rgba(255,255,255,0.04);*/
      border: 1px solid rgba(0,0,0,0.13);
      border-radius: 12px;
      padding: 1.1rem 1.6rem;
      transition: border-color 0.3s ease, transform 0.3s ease;
    }
    .service-card:hover {
      border-color: rgba(255, 90, 61, 0.3);
      transform: translateY(-3px);
    }
    .service-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--dot-color);
      margin-bottom: 1.1rem;
    }
    .service-card h3 {
      font-family: "Heebo", sans-serif;
      font-size: 1.1rem;
      font-weight: 900;
      color: #0f1115;
      /*margin-bottom: 0.5rem;*/
    }
    .service-card p {
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      font-size: 0.875rem;
      color: rgba(0,0,0,0.7);
      line-height: 1.6;
    }

    .second-footer {
      border-top: 1px solid rgba(0,0,0,0.13);
      padding-top: 2.5rem;
    }
    .contact-line {
      font-family: "Heebo", sans-serif;
      font-size: clamp(1.4rem, 4vw, 2.2rem);
      font-weight: 900;
      color: #0f1115;
      margin-bottom: 1rem;
    }
    .contact-link {
      font-family: "Open Sans", sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: rgba(0,0,0,0.7);
      text-decoration: none;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      padding-bottom: 2px;
      transition: color 0.3s ease, border-color 0.3s ease;
    }
    .contact-link:hover {
      color: var(--dot-color);
      border-color: var(--dot-color);
    }

    footer {
      font-family: "Open Sans", sans-serif;
      padding-block: 2rem;
      font-size: 0.8rem;
      font-weight: normal;
      text-align: center;
      width: 100%;
      position: relative;
      background: #fff;
      color: rgba(0,0,0,0.7);
    }