*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#071014;color:#eef6f5;font:15px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif}header{height:96px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:#071014ee;border-bottom:1px solid #19343c;backdrop-filter:blur(14px)}.logo{display:flex;align-items:center;color:#fff;text-decoration:none;height:78px;flex:0 0 auto}.logo img{display:block;width:auto;height:70px;max-width:280px;object-fit:contain}nav{display:flex;gap:24px}nav a{color:#99adb1;text-decoration:none}nav a:hover{color:#fff}.hero{min-height:570px;padding:95px 9%;display:flex;align-items:center;justify-content:space-between;gap:45px;background:radial-gradient(circle at 75% 25%,#124449,transparent 34%),linear-gradient(135deg,#071014,#0b1b20)}.eyebrow{color:#2fe3c0;font-weight:850;letter-spacing:2px;font-size:11px}.hero h1{font-size:clamp(55px,8vw,100px);line-height:.93;letter-spacing:-5px;margin:18px 0}.hero em{font-style:normal;color:#2fe3c0}.hero p{font-size:19px;color:#9eb1b5;max-width:600px}.cta,.card button,.action{display:inline-block;background:#2fe3c0;color:#041014;border:0;border-radius:10px;padding:12px 16px;font-weight:850;text-decoration:none;cursor:pointer}.hero-panel{width:300px;background:#0c2026d9;border:1px solid #244851;border-radius:20px;padding:20px;box-shadow:0 25px 90px #0008}.hero-panel div{display:flex;align-items:baseline;justify-content:space-between;padding:17px 4px;border-bottom:1px solid #24414a}.hero-panel div:last-child{border-bottom:0}.hero-panel b{font-size:30px}.hero-panel span{color:#91a5aa}.wrap{max-width:1320px;margin:auto;padding:70px 6%}.heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:35px}.heading h2,.trust h2{font-size:43px;letter-spacing:-1.5px;margin:7px 0}.heading input{width:290px;padding:13px 15px;background:#0c1b20;color:#fff;border:1px solid #2a454d;border-radius:10px}.group{margin:48px 0}.group-title{display:flex;gap:13px;align-items:center;margin-bottom:18px}.group-title h3{margin:0;font-size:25px}.group-title p{margin:2px 0;color:#819499}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:#0c1b20;border:1px solid #1d363e;border-radius:15px;padding:20px;min-height:215px;display:flex;flex-direction:column;transition:.18s}.card:hover{border-color:#2fe3c0;transform:translateY(-2px)}.card .icon{font-size:25px;color:#2fe3c0}.card h4{font-size:18px;margin:13px 0 5px}.card p{color:#8fa3a8;font-size:13px;margin:0 0 15px;flex:1}.card button{font-size:12px;padding:9px 12px;align-self:flex-start}.trust{border-top:1px solid #18333a}.trust p{max-width:750px;color:#8fa3a8;font-size:17px}.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;padding:18px;z-index:30}.hidden{display:none}.panel{position:relative;width:min(760px,100%);max-height:90vh;overflow:auto;background:#0b1b20;border:1px solid #2a4850;border-radius:18px;padding:30px}.close{position:absolute;right:13px;top:8px;background:none;border:0;color:#9bb0b5;font-size:30px;cursor:pointer}.form{display:grid;gap:13px}.form input,.form select,.form textarea{width:100%;background:#071216;color:#fff;border:1px solid #29444c;border-radius:9px;padding:11px}.result{margin-top:15px;padding:15px;border-radius:11px;background:#10272d;border:1px solid #23464f}.result strong{color:#2fe3c0}.download{display:inline-block;margin-top:12px;background:#2fe3c0;color:#041014;padding:9px 12px;border-radius:8px;font-weight:850;text-decoration:none}footer{border-top:1px solid #19343c;padding:28px 6%;display:flex;justify-content:space-between;color:#71868b}@media(max-width:900px){.hero{padding:70px 6%;flex-direction:column;align-items:flex-start}.hero-panel{width:100%;max-width:450px}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.logo{height:42px}.logo img{height:38px;max-width:190px}nav{display:none}.hero h1{font-size:64px}.wrap{padding:50px 5%}.heading{flex-direction:column;align-items:stretch}.heading input{width:100%}.grid{grid-template-columns:1fr}footer{flex-direction:column;gap:8px}}
.card-link{display:inline-block;background:#2fe3c0;color:#041014;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:850;text-decoration:none;align-self:flex-start}.card-link:hover{filter:brightness(1.05)}
.tool-hero{padding:65px 6% 35px;background:radial-gradient(circle at 80% 10%,#124449,transparent 34%),linear-gradient(135deg,#071014,#0b1b20)}.tool-shell{max-width:900px;margin:auto}.tool-breadcrumb{font-size:13px;color:#819499;margin-bottom:25px}.tool-breadcrumb a{color:#9eb1b5;text-decoration:none}.tool-title{font-size:clamp(42px,7vw,76px);line-height:1;letter-spacing:-3px;margin:8px 0 15px}.tool-description{font-size:18px;color:#9eb1b5;max-width:720px}.tool-workspace{max-width:900px;margin:-10px auto 0;padding:35px 6% 70px}.tool-panel{background:#0b1b20;border:1px solid #23444c;border-radius:18px;padding:28px;box-shadow:0 20px 70px #0005}.tool-panel h2{margin-top:0;font-size:28px}.tool-info{max-width:900px;margin:auto;padding:0 6% 60px}.tool-info h2{font-size:30px}.tool-info p,.tool-info li{color:#91a5aa}.tool-info ul{padding-left:22px}.related{max-width:900px;margin:0 auto;padding:0 6% 70px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related a{display:block;background:#0c1b20;border:1px solid #1d363e;border-radius:12px;padding:14px;color:#eef6f5;text-decoration:none}.related a:hover{border-color:#2fe3c0}.legal{max-width:900px;margin:auto;padding:70px 6%}.legal h1{font-size:52px}.legal p,.legal li{color:#91a5aa}.home-note{font-size:13px;color:#71868b;margin-top:14px}.site-nav{display:flex;gap:20px;align-items:center}.site-nav .home-link{color:#2fe3c0}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;z-index:100;background:#2fe3c0;color:#041014;padding:8px;border-radius:6px}@media(max-width:700px){.related-grid{grid-template-columns:1fr}.tool-title{letter-spacing:-2px}.tool-panel{padding:20px}}


/* SHARASU exact logo sizing */
.site-header .brand-logo,
.site-header .logo,
header .brand-logo,
header .logo,
.navbar .brand-logo,
.navbar .logo {
  height: 52px !important;
  width: auto !important;
  max-width: 230px !important;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .site-header .brand-logo,
  .site-header .logo,
  header .brand-logo,
  header .logo,
  .navbar .brand-logo,
  .navbar .logo {
    height: 42px !important;
    max-width: 190px !important;
  }
}
/* Final SHARASU header logo visibility */
@media (max-width:768px){
  header{height:78px;padding:0 5%;}
  .logo{height:62px;}
  .logo img{height:54px;max-width:220px;}
}

/* Final dark-background SHARASU logo */
.logo img{height:58px !important;width:auto !important;max-width:260px !important;object-fit:contain;display:block;}
.logo{height:72px !important;display:flex;align-items:center;}
@media(max-width:768px){header{height:72px !important;}.logo{height:58px !important;}.logo img{height:46px !important;max-width:210px !important;}}


/* SHARASU production mobile header + responsive hero fix */
body { overflow-x: hidden; }

.menu-toggle {
  display: none;
  background: transparent;
  color: #eef6f5;
  border: 1px solid #2a454d;
  border-radius: 9px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.menu-toggle:hover {
  border-color: #2fe3c0;
  color: #2fe3c0;
}

@media (max-width: 600px) {
  header {
    height: 70px !important;
    padding: 0 5% !important;
    gap: 10px;
  }

  .logo {
    height: 58px !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  .logo img {
    height: 46px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain;
  }

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

  .site-nav {
    display: none !important;
    position: absolute;
    top: 70px;
    right: 5%;
    min-width: 185px;
    flex-direction: column;
    gap: 0;
    padding: 7px;
    background: #0b1b20;
    border: 1px solid #29444c;
    border-radius: 12px;
    box-shadow: 0 18px 45px #0009;
    z-index: 20;
  }

  .site-nav.open {
    display: flex !important;
  }

  .site-nav a {
    padding: 11px 13px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .hero {
    width: 100%;
    min-height: auto;
    padding: 58px 5% 60px !important;
    gap: 30px;
    overflow: hidden;
  }

  .hero > div:first-child {
    width: 100%;
    min-width: 0;
  }

  .hero h1 {
    font-size: clamp(44px, 13vw, 52px) !important;
    line-height: .94 !important;
    letter-spacing: -3px !important;
    max-width: 100%;
    overflow-wrap: normal;
  }

  .hero p {
    font-size: 17px !important;
    max-width: 100%;
  }

  .hero-panel {
    width: 100%;
    max-width: 450px;
  }

  .wrap {
    padding: 50px 5%;
  }
}