:root {
  --accent:#00A19E;
  --ink:#0E1E1E;
  --muted:#5F7070;
  --panel:#F7F9FA;
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,0.06);
  --font:"Inter","Space Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--panel);color:var(--ink);line-height:1.6;display:flex;flex-direction:column;min-height:100vh;}
main{flex:1;display:block;}
.wrap{max-width:720px;margin:0 auto;padding:1rem;}

h1,h2,h3{color:var(--ink);margin:1rem 0 .5rem;}
p{margin:.75rem 0;}
ul{margin:1rem 0 1rem 1.25rem;}
li{margin-bottom:.5rem;}

.appbar{background:#fff;border-bottom:1px solid #E0E6E6;box-shadow:var(--shadow);}
.appbar .bar{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:.75rem 1rem;}
.logo{height:36px;}

.hero{
  background:var(--accent);color:#fff;border-radius:var(--radius);
  padding:4rem 1.5rem 3rem;text-align:center;position:relative;overflow:hidden;
}
.hero::before{content:"";position:absolute;inset:0;background-image:url("https://assets.lucidseal.org/brand/bg/network-lines.svg");background-size:cover;background-repeat:no-repeat;opacity:0.15;}
.hero h1{font-size:2rem;font-weight:700;margin-bottom:1rem;}
.hero .lead{font-size:1.1rem;line-height:1.6;max-width:600px;margin:0 auto;}

.intro,.overview,.about{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  margin:2rem 0;padding:2rem 1.25rem;
}
.overview h2{color:var(--accent);margin-top:1.5rem;}

table{width:100%;border-collapse:collapse;margin:1rem 0;}
th,td{border:1px solid #E0E6E6;padding:.5rem;text-align:left;}
th{background:#f3f6f6;font-weight:600;}
blockquote{border-left:3px solid var(--accent);padding:.5rem 1rem;background:#f9fbfb;margin:.75rem 0;font-style:italic;}

.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:.65rem 1.25rem;text-decoration:none;font-weight:500;transition:background .3s ease,transform .2s ease;}
.btn:hover{background:#008f8c;transform:translateY(-2px);}
.btn.outline{background:transparent;border:1.5px solid var(--accent);color:var(--accent);}
.btn.outline:hover{background:var(--accent);color:#fff;}

.notify{text-align:center;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 1rem;margin:3rem 0;}
.notify h3{font-size:1.25rem;font-weight:600;color:var(--accent);margin-bottom:.5rem;}
.notify-actions{display:flex;flex-direction:column;gap:.75rem;align-items:center;margin:1rem 0;}
.notify .note{font-size:.9rem;color:var(--muted);margin-top:.5rem;line-height:1.5;}

.accordion-item{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin:1rem 0;overflow:hidden;transition:all .3s ease-in-out;}
.accordion-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:1rem 1.25rem;}
.accordion-header:hover{background:#f3f6f6;}
.icon{transition:transform .3s ease-in-out;color:var(--accent);}
.accordion-item.open .icon{transform:rotate(180deg);}
.accordion-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .4s ease;padding:0 1.25rem;}
.accordion-item.open .accordion-content{max-height:none;opacity:1;padding:0 1.25rem 1rem;}

.fade-in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease;}
.fade-in.visible{opacity:1;transform:none;}

#topBtn{position:fixed;bottom:24px;right:24px;background:var(--accent);color:#fff;border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease;box-shadow:0 4px 10px rgba(0,0,0,0.15);}
#topBtn.show{opacity:1;pointer-events:auto;transform:translateY(0);}
#topBtn:hover{background:#008a88;}

footer{text-align:center;padding:2rem 1rem;font-size:.85rem;color:var(--muted);}
.icon-btn{color:var(--muted);padding:.5rem;}
.icon-btn:hover{color:var(--accent);}