/* =====================================================
       RESET
    ====================================================== */

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
    }


    body {
      background: #07090d;
      color: #f4f5f7;

      font-family: "DM Sans", sans-serif;

      line-height: 1.6;

      overflow-x: hidden;
    }


    body.menu-open {
      overflow: hidden;
    }


    a {
      color: inherit;
      text-decoration: none;
    }


    button {
      font-family: inherit;
    }


    ::selection {
      background: #8b5cf6;
      color: white;
    }


    /* =====================================================
       VARIABLES
    ====================================================== */

    :root {

      --bg:
        #07090d;

      --bg-soft:
        #0b0e14;

      --bg-card:
        rgba(255,255,255,0.035);

      --border:
        rgba(255,255,255,0.09);

      --text:
        #f4f5f7;

      --muted:
        #969da9;

      --purple:
        #8b5cf6;

      --cyan:
        #22d3ee;

      --blue:
        #6366f1;

      --gradient:
        linear-gradient(
          110deg,
          #a78bfa,
          #6366f1 45%,
          #22d3ee
        );

      --container:
        1200px;

    }


    /* =====================================================
       GLOBAL
    ====================================================== */

    .prices-bottom-catch {
      text-align: center;
      margin-top: 50px;
    }


    .container {

      width:
        min(
          var(--container),
          calc(100% - 48px)
        );

      margin:
        0 auto;

    }


    section {

      position:
        relative;

      padding:
        140px 0;

    }


    .eyebrow {

      display:
        inline-flex;

      align-items:
        center;

      gap:
        10px;

      color:
        #a9b0bd;

      font-size:
        0.72rem;

      font-weight:
        700;

      letter-spacing:
        0.18em;

      text-transform:
        uppercase;

      margin-bottom:
        22px;

    }


    .eyebrow::before {

      content:
        "";

      width:
        24px;

      height:
        1px;

      background:
        var(--gradient);

    }


    .section-title {

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        clamp(
          2.6rem,
          5vw,
          5rem
        );

      line-height:
        1.02;

      letter-spacing:
        -0.055em;

      max-width:
        900px;

    }


    .section-description {

      color:
        var(--muted);

      font-size:
        1.08rem;

      line-height:
        1.8;

      max-width:
        680px;

      margin-top:
        28px;

    }


    .gradient-text {

      background:
        var(--gradient);

      -webkit-background-clip:
        text;

      background-clip:
        text;

      color:
        transparent;

    }


    /* =====================================================
       BUTTONS
    ====================================================== */

    .button {

      display:
        inline-flex;

      align-items:
        center;

      justify-content:
        center;

      gap:
        10px;

      min-height:
        52px;

      padding:
        0 24px;

      border-radius:
        10px;

      font-size:
        0.92rem;

      font-weight:
        700;

      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

    }


    .button:hover {

      transform:
        translateY(-3px);

    }


    .button-primary {

      color:
        #05070a;

      background:
        #f5f6f8;

      box-shadow:
        0 10px 40px
        rgba(255,255,255,0.08);

    }


    .button-primary:hover {

      box-shadow:
        0 15px 50px
        rgba(255,255,255,0.16);

    }


    .button-secondary {

      color:
        white;

      border:
        1px solid var(--border);

      background:
        rgba(255,255,255,0.035);

      backdrop-filter:
        blur(10px);

    }


    .button-secondary:hover {

      background:
        rgba(255,255,255,0.08);

    }


    /* =====================================================
       NAVBAR
    ====================================================== */

    .navbar {

      position:
        fixed;

      top:
        0;

      left:
        0;

      width:
        100%;

      z-index:
        1000;

      padding:
        24px 0;

      transition:
        padding 0.3s ease,
        background 0.3s ease,
        border 0.3s ease;

    }


    .navbar.scrolled {

      padding:
        14px 0;

      background:
        rgba(7,9,13,0.72);

      backdrop-filter:
        blur(20px);

      -webkit-backdrop-filter:
        blur(20px);

      border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    }


    .nav-inner {

      width:
        min(
          var(--container),
          calc(100% - 48px)
        );

      margin:
        0 auto;

      display:
        flex;

      align-items:
        center;

      justify-content:
        space-between;

    }


    .logo {

      display:
        flex;

      align-items:
        center;

      gap:
        10px;

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        1.25rem;

      font-weight:
        700;

      letter-spacing:
        -0.04em;

    }


    .logo-mark {

      width:
        30px;

      height:
        30px;

      position:
        relative;

      transform:
        rotate(45deg);

      border:
        1px solid
        rgba(255,255,255,0.7);

      border-radius:
        7px;

    }


    .logo-mark::after {

      content:
        "";

      position:
        absolute;

      inset:
        5px;

      border:
        1px solid
        #22d3ee;

      border-radius:
        4px;

    }


    .nav-links {

      display:
        flex;

      align-items:
        center;

      gap:
        34px;

      list-style:
        none;

    }


    .nav-links a {

      color:
        #9da4af;

      font-size:
        0.86rem;

      transition:
        color 0.2s ease;

    }


    .nav-links a:hover {

      color:
        white;

    }


    .nav-cta {

      padding:
        10px 18px;

      border:
        1px solid
        rgba(255,255,255,0.15);

      border-radius:
        8px;

      color:
        white !important;

    }


    .menu-toggle {

      display:
        none;

      width:
        42px;

      height:
        42px;

      margin-left: auto;
      
      border:
        1px solid var(--border);

      border-radius:
        8px;

      background:
        rgba(255,255,255,0.04);

      color:
        white;

      cursor:
        pointer;

    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero {
      height: 100vh; /* Täcker 100% av skärmhöjden */
      width: 100%;
      
      /* Byt ut 'din-bild.jpg' mot sökvägen eller URL:en till er bild */
      background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('/assets/img/webbz.png');
      
      /* Egenskaper som gör att bilden skalar och täcker hela skärmen */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      /* Centrerar innehållet i mitten av skärmen */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #ffffff;
      padding: 0 20px;
      

    }


    .hero-bg {

      position:
        absolute;

      inset:
        0;

      overflow:
        hidden;

      z-index:
        -2;

      background:
        radial-gradient(
          circle at 50% 45%,
          rgba(79,70,229,0.15),
          transparent 32%
        );

    }


    .hero-bg::before {

      content:
        "";

      position:
        absolute;

      inset:
        -20%;

      background:
        linear-gradient(
          115deg,
          transparent 35%,
          rgba(99,102,241,0.06),
          transparent 65%
        );

      transform:
        rotate(-12deg);

      filter:
        blur(50px);

    }


    


    .hero-content {

      max-width:
        950px;

    }

    .hero-undertext {

      margin-top: 15px;
      margin-bottom: 15px;

    }


    .hero-badge {

      display:
        inline-flex;

      align-items:
        center;

      gap:
        9px;

      padding:
        8px 12px;

      margin-bottom:
        28px;

      border:
        1px solid
        rgba(255,255,255,0.1);

      border-radius:
        100px;

      background:
        rgba(255,255,255,0.035);

      color:
        #aeb5c1;

      font-size:
        0.75rem;

    }


    .status-dot {

      width:
        7px;

      height:
        7px;

      border-radius:
        50%;

      background:
        #22d3ee;

      box-shadow:
        0 0 12px
        #22d3ee;

    }


    .hero h1 {

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        clamp(
          4rem,
          9vw,
          9rem
        );

      line-height:
        0.9;

      letter-spacing:
        -0.075em;

      max-width:
        1050px;

    }


    .hero-description {

      max-width:
        650px;

      color:
        #9da4af;

      font-size:
        1.2rem;

      line-height:
        1.75;

      margin:
        35px 0 40px;

    }


    .hero-actions {

      display:
        flex;

      gap:
        14px;

      flex-wrap:
        wrap;

    }


    .scroll-indicator {

      position:
        absolute;

      bottom:
        35px;

      left:
        50%;

      transform:
        translateX(-50%);

      color:
        #666d79;

      font-size:
        0.65rem;

      letter-spacing:
        0.2em;

      text-transform:
        uppercase;

    }


    .scroll-indicator::after {

      content:
        "";

      display:
        block;

      width:
        1px;

      height:
        45px;

      margin:
        10px auto 0;

      background:
        linear-gradient(
          #6b7280,
          transparent
        );

    }


    /* =====================================================
       PROBLEM
    ====================================================== */

    .problem {

      background:
        #0a0d12;

      border-top:
        1px solid
        rgba(255,255,255,0.05);

      border-bottom:
        1px solid
        rgba(255,255,255,0.05);

    }


    .problem-layout {

      display:
        grid;

      grid-template-columns:
        1fr 1fr;

      gap:
        100px;

      align-items:
        center;

    }


    .problem-statement {

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        clamp(
          2rem,
          4vw,
          4rem
        );

      line-height:
        1.1;

      letter-spacing:
        -0.05em;

    }


    .problem-copy {

      color:
        var(--muted);

      font-size:
        1.05rem;

      line-height:
        1.9;

    }


    .problem-copy p + p {

      margin-top:
        25px;

    }


    /* =====================================================
       GRATESTACK
    ====================================================== */

    .stack {

    }


    .stack-header {

      display:
        flex;

      justify-content:
        space-between;

      align-items:
        flex-end;

      gap:
        50px;

    }


    .stack-visual {

      position:
        relative;

      max-width:
        900px;

      margin:
        100px auto 0;

      display:
        grid;

      gap:
        12px;

    }


    .stack-line {

      position:
        absolute;

      left:
        50%;

      top:
        30px;

      bottom:
        30px;

      width:
        1px;

      transform:
        translateX(-50%);

      background:
        linear-gradient(
          transparent,
          rgba(139,92,246,0.7),
          rgba(34,211,238,0.7),
          transparent
        );

    }


    .stack-layer {

      position:
        relative;

      z-index:
        1;

      display:
        grid;

      grid-template-columns:
        80px 1fr auto;

      align-items:
        center;

      gap:
        25px;

      padding:
        28px 32px;

      border:
        1px solid
        var(--border);

      border-radius:
        14px;

      background:
        rgba(255,255,255,0.025);

      backdrop-filter:
        blur(12px);

      transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;

    }


    .stack-layer:hover {

      transform:
        translateX(8px);

      border-color:
        rgba(139,92,246,0.5);

      background:
        rgba(139,92,246,0.06);

    }


    .stack-number {

      color:
        #69707c;

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        0.75rem;

      font-weight:
        700;

    }


    .stack-name {

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        1.5rem;

      font-weight:
        600;

    }


    .stack-description {

      color:
        #7f8793;

      font-size:
        0.85rem;

      text-align:
        right;

    }


    /* =====================================================
       SERVICES
    ====================================================== */

    .services {

      background:
        #0a0d12;

    }


    .services-grid {

      display:
        grid;

      grid-template-columns:
        repeat(2,1fr);

      gap:
        18px;

      margin-top:
        75px;

    }


    .service-card {

      position:
        relative;

      overflow:
        hidden;

      min-height:
        330px;

      padding:
        38px;

      border:
        1px solid
        var(--border);

      border-radius:
        18px;

      background:
        var(--bg-card);

      transition:
        transform 0.3s ease,
        border-color 0.3s ease;

    }


    .service-card::before {

      content:
        "";

      position:
        absolute;

      width:
        200px;

      height:
        200px;

      top:
        -100px;

      right:
        -100px;

      border-radius:
        50%;

      background:
        #6366f1;

      filter:
        blur(80px);

      opacity:
        0;

      transition:
        opacity 0.4s ease;

    }


    .service-card:hover {

      transform:
        translateY(-6px);

      border-color:
        rgba(139,92,246,0.35);

    }


    .service-card:hover::before {

      opacity:
        0.15;

    }


    .service-number {

      color:
        #626976;

      font-size:
        0.75rem;

      font-weight:
        700;

      letter-spacing:
        0.1em;

    }


    .service-card h3 {

      margin-top:
        65px;

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        2rem;

      letter-spacing:
        -0.04em;

    }


    .service-card p {

      max-width:
        500px;

      margin-top:
        15px;

      color:
        #8d95a1;

      line-height:
        1.8;

    }


    .service-tags {

      display:
        flex;

      flex-wrap:
        wrap;

      gap:
        8px;

      margin-top:
        30px;

    }


    .service-tag {

      padding:
        6px 10px;

      border:
        1px solid
        rgba(255,255,255,0.08);

      border-radius:
        6px;

      color:
        #7f8793;

      font-size:
        0.7rem;

    }


    /* =====================================================
       PROCESS
    ====================================================== */

    .process-grid {

      display:
        grid;

      grid-template-columns:
        repeat(3,1fr);

      gap:
        20px;

      margin-top:
        75px;

    }


    .process-card {

      padding:
        40px 35px;

      border-top:
        1px solid
        rgba(255,255,255,0.15);

      transition:
        border-color 0.3s ease;

    }


    .process-card:hover {

      border-color:
        #8b5cf6;

    }


    .process-number {

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        3.5rem;

      color:
        rgba(255,255,255,0.1);

    }


    .process-card h3 {

      margin-top:
        35px;

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        1.6rem;

    }


    .process-card p {

      margin-top:
        15px;

      color:
        #858d99;

      line-height:
        1.8;

    }


    /* =====================================================
       SECURITY
    ====================================================== */

    .security {

      background:
        #0a0d12;

    }


    .security-layout {

      display:
        grid;

      grid-template-columns:
        0.8fr 1.2fr;

      gap:
        100px;

    }


    .security-copy {

      color:
        #969da9;

      font-size:
        1.05rem;

      line-height:
        1.9;

    }


    .security-copy p + p {

      margin-top:
        25px;

    }


    .security-points {

      display:
        grid;

      gap:
        12px;

      margin-top:
        45px;

    }


    .security-point {

      display:
        grid;

      grid-template-columns:
        45px 1fr;

      gap:
        18px;

      padding:
        22px;

      border:
        1px solid
        var(--border);

      border-radius:
        12px;

      background:
        rgba(255,255,255,0.02);

    }


    .security-icon {

      color:
        #22d3ee;

      font-size:
        1.1rem;

    }


    .security-point strong {

      display:
        block;

      margin-bottom:
        5px;

    }


    .security-point span {

      color:
        #7e8692;

      font-size:
        0.9rem;

    }


    /* =====================================================
       FAQ
    ====================================================== */

    .faq-container {

      max-width:
        850px;

      margin:
        75px auto 0;

    }


    .faq-item {

      border-bottom:
        1px solid
        rgba(255,255,255,0.09);

    }


    .faq-question {

      width:
        100%;

      display:
        flex;

      justify-content:
        space-between;

      align-items:
        center;

      padding:
        27px 0;

      border:
        0;

      background:
        transparent;

      color:
        white;

      text-align:
        left;

      font-size:
        1rem;

      font-weight:
        600;

      cursor:
        pointer;

    }


    .faq-plus {

      font-size:
        1.5rem;

      font-weight:
        300;

      transition:
        transform 0.3s ease;

    }


    .faq-answer {

      max-height:
        0;

      overflow:
        hidden;

      transition:
        max-height 0.4s ease;

    }


    .faq-answer p {

      padding:
        0 50px 28px 0;

      color:
        #858d99;

      line-height:
        1.8;

    }


    .faq-item.active
    .faq-plus {

      transform:
        rotate(45deg);

    }


    /* =====================================================
       CTA
    ====================================================== */

    .cta {

      text-align:
        center;

      overflow:
        hidden;

    }


    .cta::before {

      content:
        "";

      position:
        absolute;

      width:
        700px;

      height:
        400px;

      left:
        50%;

      top:
        50%;

      transform:
        translate(-50%,-50%);

      background:
        radial-gradient(
          ellipse,
          rgba(99,102,241,0.16),
          transparent 65%
        );

      filter:
        blur(40px);

      pointer-events:
        none;

    }


    .cta-content {

      position:
        relative;

      z-index:
        1;

    }


    .cta h2 {

      max-width:
        900px;

      margin:
        0 auto;

      font-family:
        "Space Grotesk",
        sans-serif;

      font-size:
        clamp(
          3rem,
          7vw,
          7rem
        );

      line-height:
        0.95;

      letter-spacing:
        -0.07em;

    }


    .cta p {

      max-width:
        600px;

      margin:
        30px auto 35px;

      color:
        #8e96a2;

      font-size:
        1.05rem;

    }


    /* =====================================================
       FOOTER
    ====================================================== */

    footer {

      padding:
        70px 0 30px;

      border-top:
        1px solid
        rgba(255,255,255,0.07);

      background:
        #05070a;

    }


    .footer-top {

      display:
        flex;

      justify-content:
        space-between;

      gap:
        60px;

      padding-bottom:
        60px;

    }


    .footer-brand {

      max-width:
        350px;

    }


    .footer-brand p {

      margin-top:
        20px;

      color:
        #707783;

      line-height:
        1.7;

    }


    .footer-columns {

      display:
        flex;

      gap:
        90px;

    }


    .footer-column h4 {

      margin-bottom:
        18px;

      font-size:
        0.8rem;

      text-transform:
        uppercase;

      letter-spacing:
        0.1em;

      color:
        #d2d5da;

    }


    .footer-column a {

      display:
        block;

      margin-bottom:
        10px;

      color:
        #717985;

      font-size:
        0.85rem;

    }


    .footer-column a:hover {

      color:
        white;

    }


    .footer-bottom {

      display:
        flex;

      justify-content:
        space-between;

      padding-top:
        25px;

      border-top:
        1px solid
        rgba(255,255,255,0.06);

      color:
        #555c67;

      font-size:
        0.75rem;

    }


    /* =====================================================
       SCROLL REVEAL
    ====================================================== */

    .reveal {

      opacity:
        0;

      transform:
        translateY(30px);

      transition:
        opacity 0.8s ease,
        transform 0.8s ease;

    }


    .reveal.visible {

      opacity:
        1;

      transform:
        translateY(0);

    }


    /* =====================================================
       RESPONSIVE
    ====================================================== */

    @media
    (max-width: 900px) {

      .menu-toggle {

        display:
          block;

      }


      .nav-links {

        position:
          fixed;

        top:
          75px;

        left:
          20px;

        right:
          20px;

        display:
          none;

        flex-direction:
          column;

        align-items:
          stretch;

        gap:
          5px;

        padding:
          20px;

        background:
          rgba(7,9,13,0.96);

        backdrop-filter:
          blur(20px);

        border:
          1px solid
          var(--border);

        border-radius:
          14px;

      }


      .nav-links.active {

        display:
          flex;

      }


      .nav-links a {

        display:
          block;

        padding:
          12px;

      }


      .problem-layout,
      .security-layout {

        grid-template-columns:
          1fr;

        gap:
          50px;

      }


      .services-grid {

        grid-template-columns:
          1fr;

      }


      .process-grid {

        grid-template-columns:
          1fr;

      }


      .stack-header {

        display:
          block;

      }


      .stack-layer {

        grid-template-columns:
          50px 1fr;

      }


      .stack-description {

        display:

      block;

    grid-column:

      2;

    text-align:

      left;

    margin-top:

      8px;

      }


      .footer-top {

        flex-direction:
          column;

      }

    }


    @media
    (max-width: 600px) {

      section {

        padding:
          100px 0;

      }


      .container,
      .nav-inner {

        width:
          calc(100% - 32px);

      }


      .hero {

        padding-top:
          130px;

      }


      .hero h1 {

        font-size:
          clamp(
            3.4rem,
            16vw,
            6rem
          );

      }


      .hero-description {

        font-size:
          1rem;

      }


      .hero-actions {

        flex-direction:
          column;

      }


      .button {

        width:
          100%;

      }


      .stack-layer {

        padding:
          22px;

      }


      .stack-name {

        font-size:
          1.2rem;

      }


      .service-card {

        min-height:
          auto;

      }


      .service-card h3 {

        margin-top:
          50px;

      }


      .footer-columns {

        flex-direction:
          column;

        gap:
          35px;

      }


      .footer-bottom {

        flex-direction:
          column;

        gap:
          10px;

      }

    }