:root{ --ease:cubic-bezier(.22,1,.36,1); }

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

html, body{ overflow-x:hidden; max-width:100%; }

html{ -webkit-tap-highlight-color: transparent; }

body{ font-family:'Sora',sans-serif; background:#05070D; color:white; overflow-x:hidden; }

section{ will-change: transform, opacity; }

@media(max-width:768px){


}

.gradient-bg{
  position:fixed;
  inset:0;
  width:auto;
  height:auto;
  top:0;
  left:0;
  z-index:-2;
  background: radial-gradient(
    circle at var(--x,50vw) var(--y,50vh),
    rgba(91,140,255,.25),
    transparent 40%
  ),#05070D;
  transition:.1s;
}

.orb{ position:fixed; border-radius:50%; filter:blur(40px); opacity:.16; z-index:-1; }

.orb1{ width:340px; height:340px; background:#4D7CFE; top:-180px; left:-180px; }

.orb2{ width:340px; height:340px; background:#00FFD1; bottom:-220px; right:-180px; }

@media(max-width:768px) {
  .gradient-bg, .orb{ display:none; }

  section{ transform:none !important; opacity:1 !important; }

  nav{ padding:18px 6%; }

  nav div:last-child{ display:none; /* hide links for now */ }

}


.navbar { position: fixed; width: 100%; top: 0; z-index: 999; backdrop-filter: blur(10px); background: rgba(10,15,25,0.7); }

.nav-container { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; }

.logo{ height:28px; width:auto; display:block; }

@media(max-width:768px){

  .logo{ height:22px; }

}

.desktop-nav a { margin-left: 32px; text-decoration: none; color: white; font-weight: 500; }

.desktop-nav .cta { padding: 10px 18px; border-radius: 8px; background: linear-gradient(90deg,#4facfe,#00f2fe); }

.hamburger { display: none; flex-direction: column; cursor: pointer; }

.hamburger span{ width:26px; height:2px; background:white; margin:6px 0; display:block; transition:.3s; }

.hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }

.hamburger.active span:nth-child(2){ transform:rotate(-45deg) translate(6px,-6px); }

.mobile-menu {
  position: fixed; top:0; left:0; width:100%; height:100vh;

  padding: 40px;

  background: rgba(7,11,20,.9); backdrop-filter: blur(18px);

  display:flex; flex-direction:column; justify-content:center;
  align-items:center;

  opacity:0; visibility:hidden; pointer-events:none;

  transition:opacity .35s ease; }

  .mobile-menu.active{ opacity:1; visibility:visible; pointer-events:auto;
  }

  .mobile-menu a { color: white; font-size: 22px; margin: 16px 0;
    text-decoration: none; }

    .close-menu{ position:absolute; top:28px; right:28px; width:34px;
      height:34px; cursor:pointer; }

      .close-menu span{ position:absolute; width:100%; height:2px;
        background:white; top:50%; left:0; }

        .close-menu span:nth-child(1){ transform:rotate(45deg); }

        .close-menu span:nth-child(2){ transform:rotate(-45deg); }

        .close-menu:hover{ transform:scale(1.12); transition:.2s; }

        .mobile-cta { margin-top: 30px; padding: 14px 28px; font-size: 18px;
          border-radius: 10px; border: none; color: white; background:
          linear-gradient(90deg,#4facfe,#00f2fe); }

          @media (max-width: 900px) { .desktop-nav { display: none; }

            .hamburger { display: flex; }

            .mobile-menu a{ font-size:24px; margin:22px 0; }

          }

          .navbar { position: fixed; width: 100%; top: 0; z-index: 999;
            backdrop-filter: blur(10px); background: rgba(10,15,25,0.7); }

            .nav-container { display: flex; justify-content: space-between;
              align-items: center; padding: 18px 32px; }

              .logo{ height:28px; width:auto; display:block; }

              @media(max-width:768px){

                .logo{ height:22px; }

              }

              .desktop-nav a { margin-left: 32px; text-decoration: none; color: white;
                font-weight: 500; }

                .desktop-nav .cta { padding: 10px 18px; border-radius: 8px; background:
                  linear-gradient(90deg,#4facfe,#00f2fe); }

                  .hamburger { display: none; flex-direction: column; cursor: pointer; }

                  .hamburger span{ width:26px; height:2px; background:white; margin:6px 0;
                    display:block; transition:.3s; }

                    .hamburger.active span:nth-child(1){ transform:rotate(45deg)
                      translate(5px,5px); }

                      .hamburger.active span:nth-child(2){ transform:rotate(-45deg)
                        translate(6px,-6px); }

                        .mobile-menu { position: fixed; top:0; left:0; width:100%; height:100vh;

                          padding: 40px;

                          background: rgba(7,11,20,.9); backdrop-filter: blur(18px);

                          display:flex; flex-direction:column; justify-content:center;
                          align-items:center;

                          opacity:0; visibility:hidden; pointer-events:none;

                          transition:opacity .35s ease; }

                          .mobile-menu.active{ opacity:1; visibility:visible; pointer-events:auto;
                          }

                          .mobile-menu a { color: white; font-size: 22px; margin: 16px 0;
                            text-decoration: none; }

                            .close-menu{ position:absolute; top:28px; right:28px; width:34px;
                              height:34px; cursor:pointer; }

                              .close-menu span{ position:absolute; width:100%; height:2px;
                                background:white; top:50%; left:0; }

                                .close-menu span:nth-child(1){ transform:rotate(45deg); }

                                .close-menu span:nth-child(2){ transform:rotate(-45deg); }

                                .close-menu:hover{ transform:scale(1.12); transition:.2s; }

                                .mobile-cta { margin-top: 30px; padding: 14px 28px; font-size: 18px;
                                  border-radius: 10px; border: none; color: white; background:
                                  linear-gradient(90deg,#4facfe,#00f2fe); }

                                  @media (max-width: 900px) { .desktop-nav { display: none; }

                                    .hamburger { display: flex; }

                                    .mobile-menu a{ font-size:24px; margin:22px 0; }

                                  }

                                  .navbar { position: fixed; width: 100%; top: 0; z-index: 999;
                                    backdrop-filter: blur(8px); background: rgba(10,15,25,0.7); }

                                    .nav-container { display: flex; justify-content: space-between;
                                      align-items: center; padding: 18px 32px; }

                                      .logo{ height:28px; width:auto; display:block; }

                                      @media(max-width:768px){

                                        .logo{ height:22px; }

                                      }

                                      .desktop-nav a { margin-left: 32px; text-decoration: none; color: white;
                                        font-weight: 500; }

                                        .desktop-nav .cta { padding: 10px 18px; border-radius: 8px; background:
                                          linear-gradient(90deg,#4facfe,#00f2fe); }

                                          .hamburger { display: none; flex-direction: column; cursor: pointer; }

                                          .hamburger span{ width:26px; height:2px; background:white; margin:6px 0;
                                            display:block; transition:.3s; }

                                            .hamburger.active span:nth-child(1){ transform:rotate(45deg)
                                              translate(5px,5px); }

                                              .hamburger.active span:nth-child(2){ transform:rotate(-45deg)
                                                translate(6px,-6px); }

                                                .mobile-menu { position: fixed; top:0; left:0; width:100%; height:100vh;

                                                  padding: 40px;

                                                  background: rgba(7,11,20,.9); backdrop-filter: blur(8px);

                                                  display:flex; flex-direction:column; justify-content:center;
                                                  align-items:center;

                                                  opacity:0; visibility:hidden; pointer-events:none;

                                                  transition:opacity .35s ease; }

                                                  .mobile-menu.active{ opacity:1; visibility:visible; pointer-events:auto;
                                                  }

                                                  .mobile-menu a { color: white; font-size: 22px; margin: 16px 0;
                                                    text-decoration: none; }

                                                    .close-menu{ position:absolute; top:28px; right:28px; width:34px;
                                                      height:34px; cursor:pointer; }

                                                      .close-menu span{ position:absolute; width:100%; height:2px;
                                                        background:white; top:50%; left:0; }

                                                        .close-menu span:nth-child(1){ transform:rotate(45deg); }

                                                        .close-menu span:nth-child(2){ transform:rotate(-45deg); }

                                                        .close-menu:hover{ transform:scale(1.12); transition:.2s; }

                                                        .mobile-cta { margin-top: 30px; padding: 14px 28px; font-size: 18px;
                                                          border-radius: 10px; border: none; color: white; background:
                                                          linear-gradient(90deg,#4facfe,#00f2fe); }

                                                          @media (max-width: 900px) { .desktop-nav { display: none; }

                                                            .hamburger { display: flex; }

                                                            .mobile-menu a{ font-size:24px; margin:22px 0; }

                                                          }

                                                          .hero{ min-height:100svh; display:flex; flex-direction:column;
                                                            justify-content:center; padding:120px 8% 0; position:relative; }

                                                            .hero h1{ font-size: clamp(42px, 8vw, 80px); line-height:1.05; }

                                                            .hero p{ margin-top:28px; max-width:600px; color:#9AA4C7; }

                                                            @media(max-width:900px){

                                                              .hero h1{ font-size:46px; }

                                                              .statement{ font-size:30px; }

                                                            }

                                                            .hero,

                                                            .hero,

                                                            .hero{ min-height:100svh; display:flex; flex-direction:column;
                                                              justify-content:center; padding:0 8%; position:relative; }

                                                              .hero h1{ font-size: clamp(42px, 8vw, 80px); line-height:1.05; }

                                                              .hero p{ margin-top:28px; max-width:600px; color:#9AA4C7; }

                                                              @media(max-width:900px){

                                                                .hero h1{ font-size:46px; }

                                                                .statement{ font-size:30px; }

                                                              }

                                                              .card,

                                                              @media(hover:none){

                                                                .card:hover{ transform:translateY(-18px) scale(1.02); border:1px solid
                                                                  rgba(91,140,255,.7); box-shadow:0 30px 80px rgba(0,0,0,.35); }

                                                                  button:hover{ transform:none; box-shadow:none; }

                                                                }

                                                                .grid{ display:grid;
                                                                  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:34px; }

                                                                  .card{ padding:40px; border-radius:20px;
                                                                    background:rgba(255,255,255,.02); border:1px solid
                                                                    rgba(255,255,255,.05);

                                                                    opacity:0; transform:translateY(40px) scale(.98);

                                                                    transition: transform 1.1s var(--ease), opacity .9s ease, filter .9s
                                                                    ease, border .4s; }

                                                                    .card.visible{ opacity:1; transform:none; }

                                                                    .card.card::after{ content:’’; position:absolute; inset:0;
                                                                      border-radius:20px;
                                                                      background:linear-gradient(120deg,transparent,rgba(91,140,255,.15),transparent);
                                                                      opacity:0; transition:opacity .6s; }

                                                                      .card.visible::after{ opacity:1; }

                                                                      .card:hover{ transform:translateY(-18px) scale(1.02); border:1px solid
                                                                        rgba(91,140,255,.7); box-shadow:0 30px 80px rgba(0,0,0,.35); }

                                                                        .card:nth-child(1){ transition-delay:.05s; }

                                                                        .card:nth-child(2){ transition-delay:.15s; }

                                                                        .card:nth-child(3){ transition-delay:.25s; }

                                                                        .card:nth-child(4){ transition-delay:.35s; }

                                                                        .reveal-text{ opacity:0; transform:translateY(60px); transition: opacity
                                                                          1.3s var(--ease), transform 1.3s var(--ease); }

                                                                          .reveal-text.visible{ opacity:1; transform:translateY(0); }

                                                                          @media(max-width:768px){

                                                                            .grid{ gap:22px; }

                                                                            .card{ padding:26px; }

                                                                            button{ width:100%; padding:16px; }

                                                                          }

                                                                          @media(hover:none){

                                                                            .card:hover{ transform:none; border:1px solid rgba(255,255,255,.05); }

                                                                            button:hover{ transform:none; box-shadow:none; }

                                                                          }

                                                                          .grid{ display:grid;
                                                                            grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:34px; }

                                                                            .card{ padding:40px; border-radius:20px;
                                                                              background:rgba(255,255,255,.02); border:1px solid
                                                                              rgba(255,255,255,.05); transition:.5s; transform:translateY(40px);
                                                                              opacity:0; }

                                                                              .card.visible{ transform:translateY(0); opacity:1; }

                                                                              .card:hover{ transform:translateY(-14px); border:1px solid
                                                                                rgba(91,140,255,.6); }

                                                                                @media(max-width:768px){

                                                                                  .grid{ gap:22px; }

                                                                                  .card{ padding:26px; }

                                                                                  button{ width:100%; padding:16px; }

                                                                                }

                                                                                .grid-header{ grid-column:1/-1; max-width:620px; margin-bottom:20px; }

                                                                                .grid-header p{ color:#9AA4C7; margin-top:8px; }

                                                                                .glass-card:nth-child(1){ transition-delay:.05s; }

                                                                                .glass-card:nth-child(2){ transition-delay:.15s; }

                                                                                .glass-card:nth-child(3){ transition-delay:.25s; }

                                                                                .glass-card:nth-child(4){ transition-delay:.35s; }

                                                                                .glass-card:nth-child(5){ transition-delay:.45s; }

                                                                                .about-block,

                                                                                .about-grid,

                                                                                .about-hero,

                                                                                .glass-card{ opacity:0; transform:translateY(28px); transition:0.7s
                                                                                  var(--ease); }

                                                                                  .about-block,

                                                                                  .about-grid,

                                                                                  .glass-card{ will-change: transform, opacity; }

                                                                                  .about-hero{ min-height:100svh; display:flex; flex-direction:column;
                                                                                    justify-content:center; padding:0 8%; position:relative; }

                                                                                    .about-hero h1{ font-size:clamp(42px,6vw,72px); margin-bottom:20px; }

                                                                                    .about-hero p{ color:#9AA4C7; font-size:18px; }

                                                                                    .about-container{ max-width:820px; margin:auto; padding:0 8% 140px; }

                                                                                    .about-block{ margin-bottom:160px; }

                                                                                    .about-block h2{ font-size:36px; letter-spacing:-.5px;
                                                                                      margin-bottom:26px; }

                                                                                      .about-block p{ font-size:18px; color:#AAB2D0; line-height:1.8;
                                                                                        margin-bottom:16px; }

                                                                                        .tagline{ font-size:22px; font-weight:600; letter-spacing:.4px;
                                                                                          margin-top:18px; color:white; }

                                                                                          .about-grid{ display:grid;
                                                                                            grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px;
                                                                                            margin-bottom:140px; }

                                                                                            .glass-card{ position:relative; padding:34px; border-radius:22px;

                                                                                              background:rgba(255,255,255,.04);

                                                                                              border:1px solid rgba(255,255,255,.06);

                                                                                              box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px
                                                                                              rgba(255,255,255,.04);

                                                                                              transition:.5s var(--ease); }

                                                                                              .glass-card:hover{ transform:translateY(-10px); border:1px solid
                                                                                                rgba(91,140,255,.35); box-shadow:0 30px 70px rgba(0,0,0,.55); }

                                                                                                .glass-card h3{ margin-bottom:12px; }

                                                                                                .glass-card ul{ padding-left:18px; color:#AAB2D0; }

                                                                                                .principles{ font-size:22px; color:white; letter-spacing:1px; }

                                                                                                .benefits{ padding-left:18px; line-height:1.9; color:#AAB2D0; }

                                                                                                .closing{ text-align:center; }

                                                                                                @media(max-width:768px){

                                                                                                  .about-block{ margin-bottom:80px; }

                                                                                                  .about-hero{ padding-top:140px; }

                                                                                                }

                                                                                                .contact-hero{ min-height:100svh; display:flex; flex-direction:column;
                                                                                                  justify-content:center; padding:0 8%; position:relative;

                                                                                                  opacity:0; transform:translateY(40px); transition:1.2s var(--ease); }

                                                                                                  .contact-hero.visible{ opacity:1; transform:none; }

                                                                                                  .contact-hero h1{ font-size:clamp(42px,6vw,72px); letter-spacing:-1px;
                                                                                                    margin-bottom:20px; }

                                                                                                    .contact-hero p{ color:#9AA4C7; font-size:19px; line-height:1.7; }

                                                                                                    .contact-container{ max-width:1240px; margin:auto; padding:60px 8%
                                                                                                      160px;

                                                                                                      display:grid; grid-template-columns:1fr 1fr; gap:70px; }

                                                                                                      .contact-card{ position:relative; padding:52px; border-radius:26px;

                                                                                                        background:rgba(255,255,255,.03); backdrop-filter:blur(8px);

                                                                                                        border:1px solid rgba(255,255,255,.06);

                                                                                                        box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px
                                                                                                        rgba(255,255,255,.04);

                                                                                                        transition:.6s var(--ease);

                                                                                                        opacity:0; transform:translateY(30px) scale(.99); }

                                                                                                        .contact-card.visible{ opacity:1; transform:none; }

                                                                                                        .contact-card:hover{ transform:translateY(-12px); border:1px solid
                                                                                                          rgba(91,140,255,.35); box-shadow:0 30px 80px rgba(0,0,0,.6); }

                                                                                                          .primary{ background:linear-gradient( 180deg, rgba(91,140,255,.10),
                                                                                                            rgba(255,255,255,.02) ); border:1px solid rgba(91,140,255,.25); }

                                                                                                          .contact-card::before{ content:’’; position:absolute; inset:-2px;
                                                                                                            border-radius:inherit;

                                                                                                            background:radial-gradient( 600px circle at var(--x) var(--y),
                                                                                                              rgba(91,140,255,.16), transparent 40% );

                                                                                                            opacity:0; transition:.6s; z-index:-1; }

                                                                                                            .contact-card:hover::before{ opacity:1; }

                                                                                                            .contact-card h3{ font-size:26px; letter-spacing:-.3px;
                                                                                                              margin-bottom:14px; }

                                                                                                              .contact-card p{ color:#AAB2D0; line-height:1.8; margin-bottom:26px; }

                                                                                                              .cta-btn{ position:relative; display:inline-block;

                                                                                                                padding:18px 34px; border-radius:14px;

                                                                                                                background:linear-gradient(135deg,#5B8CFF,#00FFD1); color:#041018;
                                                                                                                font-weight:600; text-decoration:none;

                                                                                                                transition:.35s var(--ease); box-shadow:0 10px 30px rgba(91,140,255,.35);
                                                                                                              }

                                                                                                              .cta-btn:hover{ transform:translateY(-4px); box-shadow:0 20px 50px
                                                                                                                rgba(91,140,255,.55); }

                                                                                                                .info{ margin-top:30px; color:#AAB2D0; }

                                                                                                                .info strong{ color:white; }

                                                                                                                @media(max-width:900px){

                                                                                                                  .contact-container{ grid-template-columns:1fr; gap:40px; }

                                                                                                                  .contact-hero{ padding-top:150px; }

                                                                                                                }

                                                                                                                footer{ padding:100px 8%; border-top:1px solid rgba(255,255,255,.05);
                                                                                                                  color:#7F8AB2; text-align:center; }

                                                                                                                  footer{ padding:100px 8%; border-top:1px solid rgba(255,255,255,.05);
                                                                                                                    color:#7F8AB2; text-align:center; }

                                                                                                                    footer{ padding:100px 8%; border-top:1px solid rgba(255,255,255,.05);
                                                                                                                      color:#7F8AB2; text-align:center; }

                                                                                                                      @media(max-width:768px){ section{ padding:80px 6%; } }

                                                                                                                      @media(max-width:768px){ section{ padding:80px 6%; } }

                                                                                                                      section{ padding:120px 8%; }

/* ===== Mouse Gradient ===== */

/* ===== Glow Orbs ===== */

/* ===== NAV ===== */

/* Desktop */

/* Hamburger */

/* Animate into X */

/* Mobile Menu */

/* ACTIVE */

/* lines */

/* rotate into X */

/* subtle hover = luxury */

/* Responsive */

.no-scroll { overflow: hidden; }

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

.gradient-text{ background:linear-gradient(90deg,#5B8CFF,#00FFD1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ===== Magnetic Button ===== */

.cta{ margin-top:50px; }

button{ padding:18px 38px; border-radius:14px; border:none;
  background:linear-gradient(90deg,#5B8CFF,#00FFD1); color:#05070D;
  font-weight:600; font-size:16px; cursor:pointer; transition:.25s;
  position:relative; }

  button:hover{ transform:scale(1.08); box-shadow:0 20px 60px
    rgba(91,140,255,.5); }

/* ===== Sections ===== */

section{ padding:120px 8%; }

/* ===== Cards ===== */

/* ===== Massive Statement ===== */

.statement{ font-size: clamp(26px, 6vw, 52px); }

/* ===== Footer ===== */

.visible{ opacity:1; transform:none; }

/* ===== Mouse Gradient ===== */

/* ===== Glow Orbs ===== */

/* ===== NAV ===== */

/* Desktop */

/* Hamburger */

/* Animate into X */

/* Mobile Menu */

/* ACTIVE */

/* lines */

/* rotate into X */

/* subtle hover = luxury */

/* Responsive */

.no-scroll { overflow: hidden; }

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

.gradient-text{ background:linear-gradient(90deg,#5B8CFF,#00FFD1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ===== Magnetic Button ===== */

.cta{ margin-top:50px; }

button{ padding:18px 38px; border-radius:14px; border:none;
  background:linear-gradient(90deg,#5B8CFF,#00FFD1); color:#05070D;
  font-weight:600; font-size:16px; cursor:pointer; transition:.25s;
  position:relative; }

  button:hover{ transform:scale(1.08); box-shadow:0 20px 60px
    rgba(91,140,255,.5); }

/* ===== Sections ===== */

section{ padding:120px 8%; }

/* ===== Cards ===== */

/* ===== Massive Statement ===== */

.statement{ font-size: clamp(26px, 6vw, 52px); }

/* ===== Footer ===== */

/* =========================

GLOBAL

========================= */

/* =========================

AMBIENT BACKGROUND

========================= */

/* =========================

NAV

========================= */

/* Desktop */

/* Hamburger */

/* Animate into X */

/* Mobile Menu */

/* ACTIVE */

/* lines */

/* rotate into X */

/* subtle hover = luxury */

/* Responsive */

.no-scroll { overflow: hidden; }

/* =========================

HERO

========================= */

.gradient-text{ background:linear-gradient(90deg,#5B8CFF,#00FFD1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* =========================

CONTACT GRID

========================= */

/* =========================

CARD

========================= */

/* Primary Card */

/* Glow */

/* Typography */

/* =========================

BUTTON

========================= */

/* =========================

INFO

========================= */

/* =========================

FOOTER

========================= */

/* =========================

MOBILE

========================= */