.saily-page { background-color: #15201d; }
.saily-page::before { opacity: .52; filter: saturate(.72) brightness(.62); }
.saily-shell { padding: 48px 0 80px; }
.saily-hero { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.saily-hero-copy h1 { max-width: 780px; margin: 12px 0 24px; color: #f4ead4; font-size: clamp(48px, 6.5vw, 88px); line-height: .94; letter-spacing: -.064em; text-shadow: 4px 5px 0 #0d1714; }
.saily-hero-copy h1 em { color: #ee8b68; font-style: normal; }
.saily-hero-copy > p { max-width: 700px; margin: 0; color: #cbd3c7; font-size: 15px; line-height: 1.75; }
.saily-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.saily-primary, .saily-secondary { min-height: 54px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: 6px; font: 900 11px/1 ui-monospace, "Cascadia Code", monospace; text-decoration: none; text-transform: uppercase; }
.saily-primary { border: 2px solid #3c3028; background: #ed825c; color: #252a25; box-shadow: inset 0 2px #ffc2a3, inset -2px -2px #a94b32, 0 7px 0 #793c2d, 0 12px 24px #0005; }
.saily-primary:hover { background: #f3926b; }
.saily-primary:active { translate: 0 4px; box-shadow: inset 0 2px #ffc2a3, inset -2px -2px #a94b32, 0 3px 0 #793c2d; }
.saily-primary span { font-size: 19px; }
.saily-secondary { border: 2px solid #8b816d; background: #d9ceb4; color: #30372f; box-shadow: inset 1px 2px #fff8df, 0 5px 0 #6d6658; }
.saily-fine-print { margin-top: 18px !important; color: #94a397 !important; font: 800 10px/1.5 ui-monospace, "Cascadia Code", monospace !important; }
.saily-console { rotate: .7deg; }
.saily-console-case { padding: 13px 13px 20px; border: 9px solid #b9aa87; border-radius: 24px; background: #968d78; box-shadow: inset 0 0 0 3px #55554d, inset 0 -12px 18px #716a5a, 0 30px 65px #0009; }
.saily-console-top { display: flex; justify-content: space-between; padding: 3px 9px 11px; color: #353a33; font: 900 8px/1 ui-monospace, "Cascadia Code", monospace; letter-spacing: .09em; }
.saily-console-top b { color: #244638; text-shadow: 0 0 7px #6ad38a; }
.saily-console-screen { min-height: 430px; padding: 28px; display: grid; align-content: center; gap: 10px; border: 8px solid #454842; border-radius: 13px; background: repeating-linear-gradient(0deg, rgba(165,255,204,.026) 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 38%, #275247, #102721 74%); box-shadow: inset 0 0 42px #0009, 0 2px #eadcbf; }
.saily-console-kicker { margin-bottom: 7px; color: #efc86e; font: 900 9px/1 ui-monospace, "Cascadia Code", monospace; letter-spacing: .15em; }
.saily-console-row { padding: 12px; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; border: 1px solid #456b59; background: #10261fcc; }
.saily-console-row.active { border-color: #c59c4f; background: #273c2e; }
.saily-console-row > i { display: grid; place-items: center; width: 31px; height: 28px; border: 1px solid #72927a; border-radius: 4px; color: #efca70; font: 900 9px/1 ui-monospace, monospace; font-style: normal; }
.saily-console-row strong, .saily-console-row small { display: block; }
.saily-console-row strong { color: #e3ead9; font-size: 13px; }
.saily-console-row small { margin-top: 3px; color: #b9cbbb; font-size: 9px; line-height: 1.35; }
.saily-console-row > b { color: #79d89d; font: 900 8px/1 ui-monospace, monospace; }
.saily-console-controls { display: flex; justify-content: flex-end; align-items: center; gap: 7px; padding: 14px 10px 0; }
.saily-console-controls span { width: 9px; height: 9px; border-radius: 50%; background: #a45d43; box-shadow: inset 1px 1px #edb591; }
.saily-console-controls span:first-child { background: #5f8e61; box-shadow: 0 0 6px #79ad78; }
.saily-console-controls b { margin-left: 5px; color: #30342d; font: 900 8px/1 ui-monospace, monospace; }
.saily-bridge { margin: 42px 0 92px; padding: 24px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; border-block: 1px solid #56635b; text-align: center; }
.saily-bridge > div { display: grid; justify-items: center; }
.saily-bridge > i { color: #e7bd64; font: 900 25px/1 ui-monospace, monospace; font-style: normal; }
.saily-node { width: 52px; height: 48px; display: grid; place-items: center; border: 2px solid #a99a78; border-radius: 8px; background: #d9cdae; color: #304038; box-shadow: inset 1px 1px #fff4d5, 0 5px 0 #4a4d43; font: 900 15px/1 ui-monospace, monospace; }
.saily-node-main { background: #e68462; color: #2d332d; }
.discord-node { background: #6876bd; color: #f5f0df; }
.saily-bridge strong { margin-top: 12px; color: #f0e7d3; font-size: 15px; }
.saily-bridge small { margin-top: 3px; color: #aebaae; font-size: 10px; }
.saily-bridge > p { grid-column: 1 / -1; margin: 12px 0 0; color: #c9d0c5; font-size: 13px; }
.saily-tool-section { padding: 36px 0 86px; }
.saily-tool-section > header { max-width: 820px; margin-bottom: 34px; }
.saily-tool-section > header > span { color: #e8be67; font: 900 9px/1 ui-monospace, monospace; letter-spacing: .14em; }
.saily-tool-section h2, .saily-final-cta h2 { margin: 11px 0 13px; color: #f1e8d5; font-size: clamp(36px, 5vw, 64px); line-height: .98; letter-spacing: -.055em; }
.saily-tool-section > header p, .saily-final-cta p { margin: 0; color: #c8d0c6; font-size: 14px; line-height: 1.7; }
.saily-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.saily-tool-grid article { position: relative; min-height: 245px; padding: 24px; border: 3px solid #766e5b; border-radius: 8px; background: #dfd5bd; color: #303a32; box-shadow: inset 0 0 0 2px #fff5db, 0 7px 0 #363830, 0 14px 26px #0003; }
.saily-tool-grid article > span { position: absolute; top: 14px; right: 15px; color: #9b593f; font: 900 9px/1 ui-monospace, monospace; }
.saily-tool-grid article > i { width: 43px; height: 39px; display: grid; place-items: center; border: 2px solid #28443c; border-radius: 6px; background: #49675c; color: #f4cf75; box-shadow: inset 1px 1px #84998d, 0 4px 0 #24372f; font: 900 17px/1 ui-monospace, monospace; font-style: normal; }
.saily-tool-grid h3 { margin: 28px 0 10px; font-size: 18px; }
.saily-tool-grid p { margin: 0; color: #4c564d; font-size: 12px; line-height: 1.65; }
.saily-final-cta { padding: clamp(32px, 5vw, 62px); display: flex; justify-content: space-between; gap: 50px; align-items: center; border: 8px solid #b9aa87; border-radius: 18px; background: #d6c8a8; box-shadow: inset 0 0 0 3px #6a6455, 0 18px 50px #0007; }
.saily-final-cta h2 { color: #26352d; }
.saily-final-cta p { color: #414941; }
.saily-final-cta .saily-primary { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .saily-hero { grid-template-columns: 1fr; }
  .saily-console { width: min(680px, 100%); margin-inline: auto; }
  .saily-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .saily-shell { padding-top: 30px; }
  .saily-hero { min-height: 0; }
  .saily-hero-copy h1 { font-size: clamp(46px, 13vw, 70px); }
  .saily-bridge { grid-template-columns: 1fr; }
  .saily-bridge > i { rotate: 90deg; }
  .saily-tool-grid { grid-template-columns: 1fr; }
  .saily-tool-grid article { min-height: 0; }
  .saily-final-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 540px) {
  .saily-hero-copy h1 { font-size: 44px; }
  .saily-actions { display: grid; }
  .saily-primary, .saily-secondary { width: 100%; }
  .saily-console-case { padding: 7px 7px 14px; border-width: 5px; border-radius: 17px; }
  .saily-console-screen { min-height: 410px; padding: 18px 10px; border-width: 5px; }
  .saily-console-row { grid-template-columns: 31px 1fr; }
  .saily-console-row > b { grid-column: 2; }
  .saily-bridge { margin-bottom: 55px; }
  .saily-final-cta { padding: 27px 22px; border-width: 5px; }
}