/*
 * TechWorkDesk – Halcyonic-inspired adaptation
 * Layout direction based on Halcyonic by HTML5 UP (AJ). Original design credit retained.
 * Custom implementation and visual theme for TechWorkDesk.
 */
:root {
  --ink: #1b2b38;
  --muted: #5f7180;
  --navy: #10283c;
  --navy-2: #18384e;
  --teal: #147f87;
  --teal-2: #20a1a0;
  --line: #d8e1e7;
  --paper: #ffffff;
  --page: #e9eff3;
  --soft: #f3f7f9;
  --shadow: 0 10px 28px rgba(16,40,60,.08);
  --radius: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
  font-size: 16px; line-height: 1.68; text-rendering: optimizeLegibility;
}
a { color: #087a83; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #07575f; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid #e7b44b; outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 1rem; top: 1rem; width:auto; height:auto; padding:.75rem 1rem; background:#fff; z-index:1000; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
#site-header { background: linear-gradient(118deg, var(--navy), #15364b 65%, #145666); color:#fff; }
.brand-row { min-height: 88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding: 18px 0; }
.brand { display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; }
.brand-mark { width:46px; height:46px; flex:0 0 46px; border-radius:10px; background:linear-gradient(145deg,#29b2ae,#0b6b79); display:grid; place-items:center; color:#fff; font-size:15px; font-weight:850; letter-spacing:-1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.brand-name { display:block; font-size:1.38rem; line-height:1.1; font-weight:800; letter-spacing:.08em; }
.brand-tagline { display:block; color:#c2d5df; font-size:.82rem; margin-top:4px; letter-spacing:.02em; }
.header-note { color:#c2d5df; font-size:.84rem; text-align:right; max-width:290px; }
#main-nav-wrap { background:rgba(5,20,32,.28); border-top:1px solid rgba(255,255,255,.12); }
#main-nav { display:flex; align-items:stretch; gap:5px; min-height:54px; }
#main-nav a { display:flex; align-items:center; color:#dce9ef; text-decoration:none; padding:12px 13px; font-size:.9rem; font-weight:650; border-bottom:3px solid transparent; white-space:nowrap; transition:background .18s ease, color .18s ease, border-color .18s ease; }
#main-nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
#main-nav a.active { color:#fff; border-bottom-color:#4ed0c8; background:rgba(255,255,255,.08); }
.menu-toggle { display:none; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:7px; padding:8px 12px; font:inherit; cursor:pointer; }
#hero { color:#fff; background:linear-gradient(118deg,#183d55 0%,#176c79 100%); position:relative; overflow:hidden; }
#hero:after { content:""; position:absolute; right:-8%; top:-45%; width:54%; height:190%; border:1px solid rgba(255,255,255,.13); border-radius:50%; transform:rotate(-18deg); box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.02),0 0 0 110px rgba(255,255,255,.015); pointer-events:none; }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns: 1.35fr .65fr; gap:45px; align-items:center; padding:55px 0 58px; }
.eyebrow { display:inline-block; color:#b6eeea; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:800; margin:0 0 12px; }
#hero h1 { font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.08; margin:0 0 17px; color:#fff; letter-spacing:-.04em; }
#hero p { margin:0 0 18px; max-width:720px; color:#e1eff3; font-size:1.08rem; }
.hero-panel { border:1px solid rgba(255,255,255,.26); background:rgba(5,27,42,.22); border-radius:var(--radius); padding:23px; backdrop-filter:blur(3px); }
.hero-panel strong { display:block; color:#fff; font-size:1.03rem; margin-bottom:8px; }
.hero-panel p { color:#d5e8ed; font-size:.9rem; margin:0; }
.hero-stat { display:flex; gap:12px; align-items:center; margin-top:15px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); }
.hero-stat b { font-size:1.55rem; color:#7be0d6; line-height:1; }
.hero-stat span { color:#d5e8ed; font-size:.83rem; line-height:1.35; }
#page-intro { background:#fff; border-bottom:1px solid var(--line); }
.page-intro-inner { padding:30px 0 27px; }
.breadcrumb { font-size:.78rem; color:#81909a; margin:0 0 8px; }
.page-intro-inner h1 { font-size:clamp(1.9rem,3vw,2.65rem); line-height:1.15; color:var(--navy); margin:0 0 8px; letter-spacing:-.035em; }
.page-intro-inner p { color:var(--muted); margin:0; max-width:920px; }
main { padding:34px 0 55px; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; margin-bottom:22px; }
.panel h2 { color:var(--navy); font-size:1.55rem; line-height:1.25; margin:0 0 14px; letter-spacing:-.02em; }
.panel h3 { color:#19475d; font-size:1.19rem; line-height:1.3; margin:1.55rem 0 .65rem; }
.panel p { margin:0 0 1rem; }
.panel p:last-child { margin-bottom:0; }
.panel ul, .panel ol { padding-left:1.35rem; margin:.5rem 0 1.2rem; }
.panel li { padding-left:.2rem; margin:.27rem 0; }
.section-kicker { display:block; color:var(--teal); font-size:.73rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px; }
.section-heading { margin:0 0 18px; color:var(--navy); font-size:1.65rem; letter-spacing:-.025em; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-card { display:flex; flex-direction:column; min-height:210px; padding:22px; color:var(--ink); text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.feature-card:hover { transform:translateY(-3px); border-color:#79c8c7; box-shadow:0 15px 34px rgba(16,40,60,.12); text-decoration:none; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.card-number { color:#13858c; font-weight:850; font-size:.78rem; letter-spacing:.12em; }
.card-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:9px; background:#e9f5f5; color:#107b83; font-size:1.12rem; font-weight:800; }
.feature-card h3 { margin:0 0 8px; color:var(--navy); font-size:1.12rem; line-height:1.3; }
.feature-card p { color:var(--muted); font-size:.92rem; margin:0; }
.card-link { margin-top:auto; padding-top:17px; color:#087a83; font-size:.86rem; font-weight:750; }
.audience-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.audience { background:var(--soft); border:1px solid #e2eaee; border-radius:8px; padding:16px; }
.audience strong { display:block; color:var(--navy); margin-bottom:5px; }
.audience span { display:block; color:var(--muted); font-size:.87rem; line-height:1.5; }
.notice { border-left:4px solid var(--teal); background:#edf7f7; padding:16px 18px; margin:20px 0; border-radius:0 8px 8px 0; }
.notice p:last-child { margin-bottom:0; }
.jump-nav { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 24px; }
.jump-nav a, .button-link { display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border-radius:7px; background:#e8f3f4; color:#126d75; text-decoration:none; font-size:.88rem; font-weight:750; border:1px solid #cfe5e6; }
.jump-nav a:hover, .button-link:hover { background:#d8ecec; text-decoration:none; }
.prose { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(20px,3vw,34px); }
.prose > header { padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:25px; }
.prose > header > p:first-child { color:var(--teal); text-transform:uppercase; font-size:.74rem; font-weight:850; letter-spacing:.13em; }
.prose h1 { font-size:clamp(2rem,3.5vw,2.7rem); line-height:1.15; color:var(--navy); margin:.3rem 0 1rem; letter-spacing:-.035em; }
.prose h2 { padding-top:12px; margin-top:2.25rem; border-top:1px solid var(--line); font-size:1.55rem; color:var(--navy); }
.prose h3 { color:#1d5266; font-size:1.12rem; margin-top:1.7rem; }
.prose p { margin:0 0 1rem; }
.prose ul { margin:.6rem 0 1.35rem; padding-left:1.4rem; }
.prose li { margin:.32rem 0; }
.prose article { margin:20px 0; padding:22px 22px 18px; background:#f8fafb; border:1px solid #e0e8ed; border-left:4px solid #21949a; border-radius:7px; }
.prose article h3 { margin:0 0 14px; font-size:1.2rem; color:var(--navy); }
.prose article p { margin-bottom:.78rem; }
.prose article p:last-child { margin-bottom:0; }
.prose code { display:inline-block; background:#edf1f3; border:1px solid #dce4e8; padding:0 .3rem; border-radius:4px; color:#21485a; font-size:.9em; }
.prose footer { margin-top:28px; padding-top:16px; border-top:1px solid var(--line); color:#73838e; font-size:.82rem; }
.placeholder-panel { background:linear-gradient(145deg,#fff,#f3f7f9); border:1px dashed #afc2cc; border-radius:var(--radius); padding:30px; }
.placeholder-label { display:inline-block; background:#edf4f6; color:#4d6978; border:1px solid #d8e4e9; border-radius:99px; padding:4px 10px; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.placeholder-panel h2 { color:var(--navy); margin:14px 0 8px; font-size:1.5rem; }
.placeholder-panel p { color:var(--muted); margin:0; max-width:780px; }
.footer-top { background:#10283c; color:#d4e2e9; padding:34px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; }
.footer-top h2 { color:#fff; font-size:1.02rem; margin:0 0 12px; }
.footer-top p { color:#bfd0d9; margin:0; font-size:.9rem; }
.footer-links { display:grid; gap:7px; }
.footer-links a { color:#d7e8ed; text-decoration:none; font-size:.9rem; }
.footer-links a:hover { color:#7be0d6; text-decoration:underline; }
#copyright { background:#0a1c2a; color:#94aab6; padding:15px 0; font-size:.78rem; }
#copyright .container { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; }
#copyright a { color:#b8d7df; }
@media (max-width: 1050px) {
  #main-nav { flex-wrap:wrap; padding:6px 0; }
  #main-nav a { padding:9px 10px; font-size:.86rem; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .audience-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .container { width:min(100% - 30px, 680px); }
  .brand-row { min-height:72px; }
  .header-note { display:none; }
  .menu-toggle { display:inline-flex; align-items:center; gap:8px; }
  #main-nav { display:none; padding:8px 0 14px; flex-direction:column; align-items:stretch; }
  #main-nav.is-open { display:flex; }
  #main-nav a { border-bottom:0; border-left:3px solid transparent; padding:10px 12px; }
  #main-nav a.active { border-left-color:#4ed0c8; border-bottom:0; }
  .hero-inner { grid-template-columns:1fr; padding:38px 0; gap:25px; }
  #hero:after { width:100%; right:-45%; }
  .feature-grid { grid-template-columns:1fr; }
  .audience-grid { grid-template-columns:1fr 1fr; }
  .panel { padding:21px; }
  .footer-grid { grid-template-columns:1fr; gap:22px; }
  #copyright .container { display:block; }
}
@media (max-width: 440px) {
  .audience-grid { grid-template-columns:1fr; }
  .brand-name { font-size:1.12rem; }
  .brand-mark { width:40px; height:40px; flex-basis:40px; }
  .prose { padding:17px; }
  .prose article { padding:16px; }
}
@media print {
  #site-header, #hero, .footer-top, #copyright, .jump-nav { display:none !important; }
  body { background:#fff; color:#000; }
  .prose, .panel { box-shadow:none; border:0; padding:0; }
  a { color:#000; }
}