/* =========================================================
   SINFUL MANAGEMENT
   TOP-END PREVIEW V3

   Inspired by the restrained composition of premium
   developer products while retaining SM's own identity.
   ========================================================= */

:root{
  --sm-bg:#0b0c0f;
  --sm-surface:#111318;
  --sm-surface-2:#15171c;
  --sm-border:#262a31;
  --sm-border-soft:#1c1f24;

  --sm-text:#f2f3f5;
  --sm-muted:#969ca6;
  --sm-dim:#686f79;

  --sm-purple:#9a7cf4;
  --sm-purple-hover:#aa91f6;
}


/* =========================================================
   PAGE
   ========================================================= */

html{
  background:var(--sm-bg);
}

body{
  margin:0;
  background:var(--sm-bg) !important;
  color:var(--sm-text);
}

body::before{
  display:none !important;
}


/* =========================================================
   TOP AREA
   ========================================================= */

.sm-top-shell{
  position:relative;

  min-height:900px;

  overflow:hidden;

  padding-top:18px;

  background:
    radial-gradient(
      850px 440px at 50% -150px,
      rgba(154,124,244,.09),
      transparent 70%
    ),
    var(--sm-bg);
}


/* very subtle depth behind the hero */

.sm-top-shell::after{
  content:"";

  position:absolute;
  z-index:0;

  left:50%;
  top:260px;

  width:900px;
  height:500px;

  transform:translateX(-50%);

  pointer-events:none;

  background:
    radial-gradient(
      ellipse,
      rgba(154,124,244,.045),
      transparent 68%
    );
}


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

.sm-floating-nav{
  position:relative !important;
  z-index:10;

  width:min(1240px,calc(100% - 48px));
  height:72px !important;

  margin:0 auto !important;
  padding:0 18px 0 20px !important;

  display:grid !important;

  grid-template-columns:
    minmax(210px,1fr)
    auto
    minmax(210px,1fr);

  align-items:center;

  border:
    1px solid rgba(255,255,255,.065)
    !important;

  border-radius:18px !important;

  background:
    rgba(17,19,24,.94)
    !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,.18)
    !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


/* brand */

.sm-top-brand{
  display:flex;
  align-items:center;

  width:max-content;

  gap:11px;

  color:#f0f1f3;

  text-decoration:none;
}

.sm-top-brand img{
  width:34px !important;
  height:34px !important;

  max-width:34px !important;
  max-height:34px !important;

  object-fit:contain;
}

.sm-top-brand span{
  color:#e8e9ec;

  font-size:14px;
  font-weight:650;

  letter-spacing:-.015em;
}


/* middle nav */

.sm-top-links{
  display:flex !important;
  align-items:center;

  gap:34px !important;
}

.sm-top-links a{
  color:#a1a6af !important;

  font-size:12px !important;
  font-weight:550;

  text-decoration:none;

  transition:
    color .15s ease;
}

.sm-top-links a:hover{
  color:#fff !important;
}


/* right side */

.sm-top-actions{
  justify-self:end;

  display:flex;
  align-items:center;

  gap:18px;
}

.sm-top-signin{
  color:#a9adb5;

  font-size:12px;
  font-weight:550;

  text-decoration:none;
}

.sm-top-signin:hover{
  color:#fff;
}

.sm-top-dashboard{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:40px;

  padding:0 17px;

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

  border-radius:8px;

  background:
    var(--sm-purple);

  color:#fff;

  font-size:12px;
  font-weight:650;

  text-decoration:none;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.sm-top-dashboard:hover{
  border-color:
    var(--sm-purple-hover);

  background:
    var(--sm-purple-hover);

  transform:
    translateY(-1px);
}


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

.sm-centered-hero{
  position:relative;
  z-index:2;

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

  margin:
    0 auto;

  padding:
    105px 0 0;
}


/* hero text */

.sm-centered-copy{
  width:
    min(940px,100%);

  margin:
    0 auto;

  text-align:center;
}

.sm-centered-copy h1{
  margin:
    0 !important;

  color:
    var(--sm-text) !important;

  font-size:
    clamp(48px,5.4vw,78px)
    !important;

  font-weight:
    650 !important;

  line-height:
    1.06 !important;

  letter-spacing:
    -.052em !important;

  text-wrap:
    balance;
}


/* SM purple emphasis */

.sm-centered-copy h1 span{
  color:
    var(--sm-purple);
}


.sm-centered-copy p{
  width:
    min(690px,100%);

  margin:
    27px auto 0;

  color:
    #a0a5ae;

  font-size:
    17px;

  font-weight:
    450;

  line-height:
    1.65;
}


/* =========================================================
   REAL PRODUCT IMAGE
   ========================================================= */

.sm-real-product-preview{
  position:relative;

  width:
    min(1200px,100%);

  margin:
    74px auto 0;

  padding-bottom:
    0;
}


/* tiny purple wash behind the real screenshot */

.sm-real-product-preview::before{
  content:"";

  position:absolute;

  z-index:-1;

  left:50%;
  top:-70px;

  width:80%;
  height:250px;

  transform:
    translateX(-50%);

  pointer-events:none;

  background:
    radial-gradient(
      ellipse,
      rgba(154,124,244,.11),
      transparent 68%
    );

  filter:
    blur(15px);
}


.sm-preview-frame{
  position:relative;

  overflow:hidden;

  padding:
    13px 13px 0;

  border:
    1px solid #292d35;

  border-bottom:
    0;

  border-radius:
    22px 22px 0 0;

  background:
    #111318;

  box-shadow:
    0 35px 90px rgba(0,0,0,.34);
}


.sm-preview-frame img{
  display:block;

  width:100%;
  height:auto;

  margin:0;

  border:
    1px solid #252931;

  border-bottom:
    0;

  border-radius:
    12px 12px 0 0;

  object-fit:cover;

  object-position:
    top center;
}


/*
   We intentionally crop the dashboard vertically.

   The next redesign stage/video determines how this transitions
   into the lower website.
*/

.sm-preview-frame{
  max-height:
    490px;
}


/* =========================================================
   KEEP LOWER WEBSITE OUT OF THIS REDESIGN FOR NOW
   ========================================================= */

/*
   Everything beginning at SINFUL_WORLD_TELEMETRY_V4 remains
   structurally untouched.

   We're intentionally NOT trying to visually finish those
   sections in this patch.
*/


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  .sm-floating-nav{
    grid-template-columns:
      1fr auto;
  }

  .sm-top-links{
    display:none !important;
  }

  .sm-centered-hero{
    padding-top:
      88px;
  }

  .sm-centered-copy h1{
    font-size:
      clamp(48px,7vw,68px)
      !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .sm-top-shell{
    min-height:
      720px;

    padding-top:
      10px;
  }

  .sm-floating-nav{
    width:
      calc(100% - 22px);

    height:
      62px !important;

    padding:
      0 10px 0 13px
      !important;

    border-radius:
      14px !important;
  }

  .sm-top-brand{
    gap:
      8px;
  }

  .sm-top-brand img{
    width:
      29px !important;

    height:
      29px !important;
  }

  .sm-top-brand span{
    font-size:
      12px;
  }

  .sm-top-signin{
    display:none;
  }

  .sm-top-actions{
    gap:
      8px;
  }

  .sm-top-dashboard{
    min-height:
      36px;

    padding:
      0 12px;

    font-size:
      11px;
  }

  .sm-centered-hero{
    width:
      calc(100% - 30px);

    padding-top:
      72px;
  }

  .sm-centered-copy h1{
    font-size:
      clamp(43px,12vw,60px)
      !important;

    line-height:
      1.02 !important;
  }

  .sm-centered-copy h1 br{
    display:none;
  }

  .sm-centered-copy p{
    margin-top:
      23px;

    font-size:
      14px;
  }

  .sm-real-product-preview{
    margin-top:
      52px;
  }

  .sm-preview-frame{
    max-height:
      310px;

    padding:
      7px 7px 0;

    border-radius:
      14px 14px 0 0;
  }

  .sm-preview-frame img{
    border-radius:
      8px 8px 0 0;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .sm-top-shell *,
  .sm-floating-nav *{
    animation:
      none !important;

    transition:
      none !important;
  }

}