/* Colors */
:root{
  --bg:#0b1214;
  --panel:#0e1a1f;
  --teal-900:#0f566d;      /* dark teal from logo */
  --teal-700:#145e73;
  --aqua-400:#9ad6de;
  --ink: var(--aqua-400);
  --muted:#b7e3ea;
  --ring:rgba(154,214,222,.55);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --active-bg: rgba(154,214,222,.20);
  --active-icon: #e6fbff;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body.theme{margin:0; color:var(--ink); background:var(--bg)  font-family:'Tomorrow',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial; font-weight:400; }

/* Orbitron for ribbon + headers */
.ribbon, h1,h2,h3,h4,h5,h6{
  font-family:'Tomorrow',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial;
  letter-spacing:.01em;
  color:var(--aqua-400);
}

/* Background motif */
body.theme::before{
  content:""; position:fixed; inset:0;
  background-image: radial-gradient(circle at 10% 10%, rgba(154,214,222,.12) 0 1px, transparent 1px),
                    radial-gradient(circle at 60% 60%, rgba(154,214,222,.06) 0 1.5px, transparent 1.5px);
  background-size:40px 40px, 100px 100px; pointer-events:none; opacity:.6;
}

/* Links & buttons */
a{color:var(--aqua-400)} a:hover{opacity:.9}
.btn{display:inline-block; padding:.7rem 1rem; background:var(--teal-900); color:#e9f6fb; border:none; border-radius:.9rem; text-decoration:none; font-weight:600; box-shadow:var(--shadow)}
.btn:hover{background:var(--teal-700)}

/* Hero (tight) */
.hero{min-height:52vh; padding:1.6rem 1.4rem 1.2rem 6rem; display:grid; align-items:center; gap:.6rem}
.logo{display:block}
.logo--hero{width:min(320px,42vw); max-width:100%; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.site-title{font-size:clamp(1.8rem, 4.2vw, 3.2rem); margin:0}
.lead{font-size:1.02rem; max-width:60ch; margin:.25rem 0 0}

/* Subheader (tight) */
.subheader{display:flex; align-items:center; gap:.7rem; padding:1.2rem 1.4rem .5rem 6rem}
.logo--sub{width:186px; height:auto}

/* Content */
.content{padding:.6rem 1.4rem 2.6rem 6rem}
.grid{display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem}
.card{background:var(--panel); border:1px solid rgba(154,214,222,.08); border-radius:1rem; padding:1rem; box-shadow:var(--shadow); position:relative}
.card h2{color:var(--aqua-400); margin:.2rem 0 .3rem}
.card p{margin:.25rem 0 .4rem}
/* smaller decorative octagon in dark teal */
.card::after{
  content:""; position:absolute; inset:auto .9rem .7rem auto;
  width:40px; height:40px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background:var(--teal-900);
  opacity:.28;
}
.link{color:var(--aqua-400); text-decoration:none; font-weight:600} .link:hover{text-decoration:underline}

/* Ribbon (flex; icons anchored) */
.ribbon{position:fixed; left:0; top:0; bottom:0; width:70px; padding:.55rem .2rem; background:rgba(11,18,20,.95); backdrop-filter:saturate(140%) blur(6px); border-right:1px solid rgba(154,214,222,.1); z-index:1000; display:flex; flex-direction:column; gap:.18rem; align-items:stretch; transition: width .25s ease; overflow:hidden}
.ribbon:hover, .ribbon:focus-within{ width:200px; }

.ribbon__nav{display:flex; flex-direction:column; gap:.08rem; width:100%}
.ribbon__link{display:flex; align-items:center; text-decoration:none; color:var(--aqua-400); font-size:.95rem; line-height:1; padding:.3rem .42rem; border-radius:.5rem}
.ribbon__link:hover{background:rgba(154,214,222,.08)}
.ribbon__icon{flex:0 0 44px; display:flex; justify-content:center; align-items:center; width:44px; height:44px}
.ribbon__label{flex:1 1 auto; overflow:hidden; max-width:0; opacity:0; white-space:nowrap; transition:max-width .25s ease, opacity .18s ease, padding-left .18s ease}
.ribbon:hover .ribbon__label, .ribbon:focus-within .ribbon__label{max-width:120px; opacity:1; padding-left:.45rem}

/* Icon look */
.icon{width:44px; height:44px}
.icon .oct{fill:var(--teal-900); stroke:none}
.icon .glyph{fill:var(--aqua-400); opacity:.98; transform:scale(.78); transform-origin:50% 50%;}
.icon .glyph--line{fill:none; stroke:var(--aqua-400); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.icon .glyph--liquid{opacity:.6}
.icon .glyph--bubble{opacity:1; stroke:var(--aqua-400); stroke-width:1.4}

/* Active page: clearly lighter */
.ribbon__link[aria-current="page"]{background:rgba(154,214,222,.20)}
.ribbon__link[aria-current="page"]{background:rgba(154,214,222,.20)}
.ribbon__link[aria-current="page"]{background:rgba(154,214,222,.20)}

/* Forms */
.form{max-width:720px} .field{display:flex; flex-direction:column; gap:.4rem; margin:.8rem 0}
label{color:var(--aqua-400)}
input,textarea{font: inherit; padding:.7rem .9rem; border-radius:.7rem; border:1px solid rgba(154,214,222,.25); background:#0c171a; color:var(--aqua-400); outline:none; box-shadow: inset 0 0 0 1px transparent, var(--shadow)}
input:focus,textarea:focus{box-shadow: inset 0 0 0 2px var(--ring), var(--shadow)}
.help{color:var(--aqua-400); opacity:.85; font-size:.9rem; margin-top:.2rem}
.status{margin-top:.8rem}

/* Footer */
.footer{padding:.9rem 1.4rem 1.8rem 6rem; color:var(--aqua-400); opacity:.95}

/* Mobile */
@media (max-width: 860px){
  .hero{padding:1.1rem 1rem .9rem 5.5rem}
  .subheader{padding:1rem 1rem .5rem 5.5rem}
  .content{padding:.6rem 1rem 1.8rem 5.5rem}
  .footer{padding:.7rem 1rem 1.4rem 5.5rem}
}
@media (max-width: 540px){
  .ribbon{width:62px}
  .icon{width:40px; height:40px}
  .ribbon__icon{flex-basis:40px; width:40px; height:40px}
  .logo--hero{width:min(300px,52vw)}
}

.icon-img{width:44px;height:44px;display:block}


/* Disable ribbon expansion on mobile */
@media (max-width: 860px){
  .ribbon:hover, .ribbon:focus-within{ width: inherit; }
}


/* --- Mobile behavior: keep ribbon fixed width, no expansion on tap/hover --- */
@media (max-width: 860px){
  .ribbon:hover,
  .ribbon:focus-within{ width: 70px !important; }
}

/* Tomorrow font weights */
body.theme {
  font-weight: 400;
}
h1,h2,h3,h4,h5,h6,
.ribbon__link span {
  font-weight: 700;
}


/* Version 10: crisper ribbon labels */
.ribbon__link .ribbon__label {
  letter-spacing: 0.02em; /* subtle geometric spacing */
}



/* v11 overrides */
body.theme{
  background: rgba(11,18,20,.95) !important;
  color: var(--ink) !important;
}

/* v12: lighter headers */
h1,h2,h3,h4,h5,h6{font-weight:500;}


/* v12: page background equals ribbon color (opaque) */
html,body{background:rgb(11,18,20) !important;}
body.theme{background:rgb(11,18,20) !important;}


/* v12.1: enforce lighter ribbon labels */
.ribbon__link span{ font-weight:400; }


/* v12.1: lock ribbon on mobile, no expansion on tap/hover */
@media (max-width: 860px){
  .ribbon:hover, .ribbon:focus-within{ width:70px !important; }
  .ribbon{ width:70px; }
}



/* v12.1: remove dotted background texture */
body.theme::before{
  content:none !important;
  background:none !important;
}