/* TTN Design System — Tennessee Technological Community
 * ttn.radio | W4BWW | EIN 41-2680033
 * Host at: dev.ttn.radio/ttn.css
 * Link from any TTN page: <link rel="stylesheet" href="https://dev.ttn.radio/ttn.css">
 */


:root {
  --bg:      #070809;
  --bg2:     #0b0d10;
  --panel:   #0e1114;
  --panel2:  #121519;
  --border:  #181d22;
  --border2: #1e252e;
  --green:   #00e676;
  --gdim:    #003d1a;
  --gglow:   rgba(0,230,118,0.07);
  --amber:   #ffab00;
  --adim:    #5c3d00;
  --blue:    #0091ea;
  --red:     #ff1744;
  --t1:      #e8f0f8;
  --t2:      #9eb4c8;
  --t3:      #4a6070;
  --mono:    'Share Tech Mono', monospace;
  --display: 'Oxanium', sans-serif;
  --body:    'DM Sans', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t2);font-family:var(--body);font-weight:300;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none;z-index:9999}

/* TOPBAR */
.tb{position:fixed;top:0;left:0;right:0;z-index:500;height:46px;background:rgba(7,8,9,0.97);border-bottom:1px solid var(--border2);backdrop-filter:blur(12px);display:flex;align-items:center;padding:0 1.5rem}
.tb-logo{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--t1);letter-spacing:0.2em;text-transform:uppercase;margin-right:2rem;display:flex;align-items:center;gap:0.5rem;cursor:pointer;user-select:none;transition:color 0.2s}
.tb-logo:hover{color:var(--green)}
.tb-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 2s ease-in-out infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.15}}
.tb-nav{display:flex;flex:1;height:100%}
.tb-nav a{font-family:var(--mono);font-size:0.62rem;color:var(--t3);text-decoration:none;padding:0 0.9rem;height:100%;display:flex;align-items:center;letter-spacing:0.1em;text-transform:uppercase;border-right:1px solid var(--border);transition:all 0.15s}
.tb-nav a:first-child{border-left:1px solid var(--border)}
.tb-nav a:hover{color:var(--green);background:var(--gglow)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:2rem}
.tb-freq{font-family:var(--mono);font-size:0.85rem;color:var(--amber);text-shadow:0 0 12px rgba(255,171,0,0.4);letter-spacing:0.05em}
.tb-tag{font-family:var(--mono);font-size:0.58rem;color:var(--t3);letter-spacing:0.1em;text-align:right}
.tb-tag span{color:var(--green);display:block;font-size:0.7rem}

/* HERO */
.hero{min-height:100vh;padding-top:46px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 60% 40%,rgba(0,230,118,0.04) 0%,transparent 65%),radial-gradient(ellipse 40% 40% at 20% 70%,rgba(0,145,234,0.03) 0%,transparent 60%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,black 20%,transparent 75%);opacity:0.6}
.hero-main{display:grid;grid-template-columns:1.1fr 1fr;align-items:start;padding:3rem 5vw 2rem;position:relative;z-index:2;gap:3rem;flex:1}
.eyebrow{font-family:var(--mono);font-size:0.65rem;color:var(--green);letter-spacing:0.25em;text-transform:uppercase;margin-bottom:1.2rem;display:flex;align-items:center;gap:0.7rem}
.eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--green);box-shadow:0 0 6px var(--green)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,5vw,4.6rem);line-height:0.95;text-transform:uppercase;color:var(--t1);margin-bottom:0.5rem}
h1 .g{color:var(--green);display:block;text-shadow:0 0 40px rgba(0,230,118,0.25)}
h1 .sub{font-weight:200;font-size:0.42em;letter-spacing:0.2em;color:var(--t3);display:block;margin-top:0.5em}
.hero-desc{font-size:0.92rem;line-height:1.75;color:var(--t2);max-width:480px;margin:1.4rem 0 0.8rem}
.hero-desc strong{color:var(--t1);font-weight:500}
.elmer-line{font-family:var(--mono);font-size:0.72rem;color:var(--green);letter-spacing:0.08em;border-left:2px solid var(--green);padding:0.4rem 0.8rem;margin:0.8rem 0 1.8rem;background:var(--gglow)}
.btns{display:flex;gap:0.8rem;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;padding:0.65rem 1.4rem;border:1px solid;transition:all 0.2s;display:inline-flex;align-items:center;gap:0.4rem}
.btn-p{background:var(--green);color:#000;border-color:var(--green);font-weight:700}
.btn-p:hover{background:transparent;color:var(--green);box-shadow:0 0 20px rgba(0,230,118,0.15)}
.btn-g{background:transparent;color:var(--t3);border-color:var(--border2)}
.btn-g:hover{color:var(--t1);border-color:var(--t3)}

/* NODE STATUS PANEL */
.nsp{background:var(--panel);border:1px solid var(--border2);font-family:var(--mono)}
.nsp-hd{background:var(--panel2);border-bottom:1px solid var(--border2);padding:0.55rem 1rem;display:flex;align-items:center;justify-content:space-between;font-size:0.6rem;letter-spacing:0.12em;color:var(--t3);text-transform:uppercase}
.nsp-hd .live{color:var(--green)}
.refresh-btn{color:var(--t3);cursor:pointer;font-size:0.58rem;border:1px solid var(--border2);padding:0.1rem 0.5rem;transition:all 0.15s;letter-spacing:0.08em}
.refresh-btn:hover{color:var(--green);border-color:var(--gdim)}
.nsp-live-banner{border-bottom:1px solid var(--gdim);padding:0.35rem 1rem;font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;display:flex;justify-content:space-between}
.nsp-live-banner.loading{color:var(--t3);background:transparent;border-color:var(--border2)}
.nsp-live-banner.ok{color:var(--green);background:var(--gglow)}
.nsp-live-banner.error{color:var(--red);background:rgba(255,23,68,0.04);border-color:rgba(255,23,68,0.15)}
.node-row{display:grid;grid-template-columns:76px 1fr 80px 58px;align-items:center;padding:0.5rem 1rem;border-bottom:1px solid var(--border);gap:0.4rem;transition:background 0.15s}
.node-row:hover{background:rgba(255,255,255,0.015)}
.node-row:last-child{border-bottom:none}
.nr-call{color:var(--amber);font-size:0.75rem}
.nr-loc{color:var(--t2);font-size:0.65rem;line-height:1.3}
.nr-loc small{color:var(--t3);font-size:0.57rem;display:block}
.nr-freq{color:var(--t1);font-size:0.63rem;text-align:right;line-height:1.4}
.nr-st{text-align:right;font-size:0.57rem;letter-spacing:0.06em;text-transform:uppercase}
.s-live{color:var(--green)}
.s-build{color:var(--amber)}
.s-plan{color:var(--t3)}
.live-nodes{background:var(--panel2)}
.live-node-row{display:flex;align-items:center;padding:0.3rem 1rem;border-bottom:1px solid var(--border);gap:0.6rem;font-size:0.62rem}
.live-node-row:last-child{border:none}
.ln-node{color:var(--amber);min-width:58px}
.ln-call{color:var(--t1);flex:1}
.ln-state{color:var(--green);font-size:0.54rem;letter-spacing:0.08em}
.ln-empty{color:var(--t3);font-size:0.6rem;padding:0.45rem 1rem;font-style:italic}
.nsp-ft{border-top:1px solid var(--border2);padding:0.55rem 1rem;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background:var(--panel2)}
.nft{text-align:center}
.nft-v{color:var(--green);font-size:0.9rem;display:block}
.nft-l{color:var(--t3);font-size:0.5rem;letter-spacing:0.1em;text-transform:uppercase}

/* TICKER */
.ticker{background:var(--panel2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);overflow:hidden;height:30px;display:flex;align-items:center;position:relative;z-index:2}
.tick-lbl{background:var(--green);color:#000;font-family:var(--mono);font-size:0.58rem;font-weight:700;letter-spacing:0.15em;padding:0 0.8rem;height:100%;display:flex;align-items:center;flex-shrink:0;text-transform:uppercase}
.tick-scroll{overflow:hidden;flex:1}
.tick-inner{display:inline-block;white-space:nowrap;animation:scroll 55s linear infinite;font-family:var(--mono);font-size:0.62rem;color:var(--t3);letter-spacing:0.06em;padding-left:2rem}
.tick-inner .hi{color:var(--green)}
.tick-inner .sep{color:var(--border2);margin:0 1.5rem}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SECTIONS */
section{padding:5rem 5vw;position:relative}
.sec-label{font-family:var(--mono);font-size:0.6rem;color:var(--green);letter-spacing:0.22em;text-transform:uppercase;display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem}
.sec-label::before{content:'';display:block;width:18px;height:1px;background:var(--green)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3vw,2.8rem);text-transform:uppercase;color:var(--t1);line-height:1;letter-spacing:-0.01em;margin-bottom:2.5rem}

/* MISSION */
.mission{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.m-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border2);border:1px solid var(--border2)}
.m-card{background:var(--panel);padding:1.8rem;position:relative;overflow:hidden;transition:background 0.2s}
.m-card:hover{background:var(--panel2)}
.m-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),transparent)}
.m-n{font-family:var(--mono);font-size:0.58rem;color:var(--green);letter-spacing:0.2em;margin-bottom:0.5rem}
.m-t{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--t1);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.6rem}
.m-d{font-size:0.85rem;color:var(--t2);line-height:1.6;font-weight:300}
.m-quote{margin-top:3rem;border-left:2px solid var(--green);padding:1rem 2rem;background:var(--gglow);font-family:var(--mono);font-size:0.8rem;color:var(--green);line-height:1.6;max-width:640px}

/* NETWORK */
.network{background:var(--bg)}
.sites-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.7rem;border:1px solid var(--border2)}
.sites-tbl thead tr{background:var(--panel2);border-bottom:1px solid var(--border2)}
.sites-tbl th{padding:0.65rem 0.9rem;text-align:left;color:var(--t3);font-size:0.57rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:400}
.sites-tbl tbody tr{border-bottom:1px solid var(--border);transition:background 0.15s}
.sites-tbl tbody tr:hover{background:rgba(255,255,255,0.02)}
.sites-tbl td{padding:0.75rem 0.9rem;vertical-align:middle}
.td-call{color:var(--amber)}
.td-loc{color:var(--t1)}
.td-loc small,.td-node small{color:var(--t3);font-size:0.6rem;display:block}
.td-freq{color:var(--t2);line-height:1.5}
.td-node{color:var(--t3);font-size:0.63rem;line-height:1.5}
.badge{display:inline-block;padding:0.12rem 0.45rem;border:1px solid;font-size:0.57rem;letter-spacing:0.1em;text-transform:uppercase}
.b-live{color:var(--green);border-color:var(--gdim);background:rgba(0,230,118,0.05)}
.b-build{color:var(--amber);border-color:var(--adim);background:rgba(255,171,0,0.05)}
.b-remote{color:var(--blue);border-color:#003366;background:rgba(0,145,234,0.05)}

/* PHASES */
.phases{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border2);border:1px solid var(--border2)}
.ph-card{background:var(--panel);padding:2rem 1.8rem;position:relative;overflow:hidden}
.ph-card.now{background:rgba(0,230,118,0.02)}
.ph-bg{position:absolute;bottom:-1rem;right:-0.5rem;font-family:var(--display);font-weight:800;font-size:9rem;line-height:1;color:var(--border);pointer-events:none;user-select:none}
.ph-n{font-family:var(--mono);font-size:0.58rem;color:var(--green);letter-spacing:0.2em;margin-bottom:0.4rem}
.ph-t{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--t1);text-transform:uppercase;line-height:1.1;margin-bottom:0.3rem}
.ph-y{font-family:var(--mono);font-size:0.65rem;color:var(--amber);letter-spacing:0.08em;margin-bottom:1.2rem}
.ph-items{list-style:none;display:flex;flex-direction:column;gap:0.4rem;position:relative;z-index:1}
.ph-items li{font-size:0.82rem;color:var(--t2);padding-left:1rem;position:relative;line-height:1.4;font-weight:300}
.ph-items li::before{content:'›';position:absolute;left:0;color:var(--green)}

/* TEAM */
.team{background:var(--bg)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--border2);border:1px solid var(--border2)}
.tc{background:var(--panel);padding:1.4rem;transition:background 0.2s}
.tc:hover{background:var(--panel2)}
.tc-call{font-family:var(--mono);font-size:0.9rem;color:var(--amber);margin-bottom:0.15rem}
.tc-name{font-family:var(--display);font-weight:700;font-size:0.95rem;color:var(--t1);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.15rem}
.tc-role{font-family:var(--mono);font-size:0.58rem;color:var(--green);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.7rem}
.tc-bio{font-size:0.8rem;color:var(--t2);line-height:1.5;font-weight:300}

/* CTA */
.cta{background:var(--bg2);border-top:1px solid var(--border2);text-align:center;padding:5rem 4rem}
.cta h2{margin-bottom:1rem}
.cta p{font-size:0.95rem;color:var(--t2);margin-bottom:2rem;max-width:500px;margin-left:auto;margin-right:auto}
.cta-freq{font-family:var(--mono);font-size:2.2rem;color:var(--amber);text-shadow:0 0 30px rgba(255,171,0,0.3);margin-bottom:0.4rem;letter-spacing:0.05em}
.cta-sub{font-family:var(--mono);font-size:0.63rem;color:var(--t3);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:2.5rem}

/* CW TOAST */
.cw-toast{position:fixed;bottom:2rem;right:2rem;background:var(--panel);border:1px solid var(--gdim);font-family:var(--mono);font-size:0.65rem;color:var(--green);padding:0.6rem 1.2rem;z-index:9998;letter-spacing:0.1em;opacity:0;transition:opacity 0.4s;pointer-events:none;box-shadow:0 0 20px rgba(0,230,118,0.1)}
.cw-toast.show{opacity:1}

/* FOOTER */
footer{background:var(--bg);border-top:1px solid var(--border2);padding:1.8rem 5vw;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:0.58rem;color:var(--t3);letter-spacing:0.08em}
footer a{color:var(--t3);text-decoration:none}
footer a:hover{color:var(--green)}

@media(max-width:900px){
  .hero-main{grid-template-columns:1fr;padding:2rem 1.5rem;gap:2rem}
  section{padding:3rem 1.5rem}
  .m-grid,.ph-grid{grid-template-columns:1fr}
  .tb-nav a{padding:0 0.45rem;font-size:0.54rem}
  footer{flex-direction:column;gap:0.5rem;text-align:center}
  .nsp-ft{grid-template-columns:1fr 1fr}
}