/* =========================================================
   Nueaklong Hospital Digital Portal — theme refresh v4
   "Nueaklong Clinical Enterprise" — matched to the 2nd Stitch
   export (deep mesh-gradient hero + glassmorphism). Same real
   5 services, same real markup/classes from index.php, same
   portal.js hooks (#appSearch, .filter-chip[data-filter],
   .app-card[data-category][data-search], #emptyState).

   Still NOT included (would need real institutional data you'd
   have to supply, not guessed): top utility bar, 14/14 · 99.98%
   stat strip, 9-service Clinical/Admin/Support catalog, meeting
   room photo, multi-column footer. Say the word once you have
   the real content and I'll wire the markup for these too.

   Fonts: Kanit (self-hosted, SIL OFL license) as the primary
   display/UI face, matching the rounded-geometric look you asked
   for. Files ship in portal-assets/fonts/ — upload that folder as-is.
   Falls back to Noto Sans Thai / system fonts if the files are
   missing. Still 100% CSP-compliant (font-src 'self') — no Google
   Fonts, no external CDN, nothing leaves the domain.
   ========================================================= */

@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("fonts/kanit-thai-300-normal.woff2") format("woff2");
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("fonts/kanit-latin-300-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/kanit-thai-400-normal.woff2") format("woff2");
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/kanit-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/kanit-thai-500-normal.woff2") format("woff2");
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/kanit-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/kanit-thai-600-normal.woff2") format("woff2");
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/kanit-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/kanit-thai-700-normal.woff2") format("woff2");
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/kanit-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("fonts/kanit-thai-800-normal.woff2") format("woff2");
  unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Kanit";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("fonts/kanit-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#F4F7FB;
  --surface:#FFFFFF;
  --surface-soft:#FBFCFE;
  --text:#111C2D;
  --muted:#64748B;
  --muted-soft:#40484B;
  --line:#E2E8F0;
  --line-soft:#EDF1F5;

  --navy:#002029;
  --brand:#0F4C5C;
  --brand-dark:#082E38;
  --brand-deep:#03343E;
  --brand-tint:#E7F0F2;

  --mint:#00A896;
  --mint-bright:#10D9BE;
  --mint-soft:#E8F5F1;
  --mint-text:#00695C;

  --cyan:#06B6D4;
  --cyan-soft:#E0F7FA;

  --blue:#2563EB;   --blue-soft:#EAF2FF;
  --emerald:#007A6C; --emerald-soft:#E8F8F1;
  --amber:#B45309;  --amber-soft:#FFF4DF;
  --violet:#6D28D9; --violet-soft:#F1EAFF;
  --teal:#0F4C5C;   --teal-soft:#E7F0F2;

  /* elevation, per the design system's Level 1 / Level 2 spec */
  --glass-1-bg:rgba(255,255,255,.85);
  --glass-1-border:rgba(15,76,92,.08);
  --glass-1-shadow:0 4px 20px -2px rgba(15,76,92,.06);
  --glass-2-bg:rgba(255,255,255,.95);
  --glass-2-shadow:0 12px 32px -4px rgba(15,76,92,.10), 0 2px 6px -1px rgba(0,0,0,.03);
  --shadow-lg:0 24px 48px -12px rgba(15,76,92,.22);

  --radius-control:8px;   /* buttons, inputs, selectors */
  --radius-card:16px;     /* cards & data modules */
  --radius-hero:24px;     /* hero / feature containers */

  font-family:"Kanit","Noto Sans Thai","Leelawadee UI","Tahoma","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input{font:inherit}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid rgba(0,168,150,.35);outline-offset:3px}
.skip-link{position:absolute;left:16px;top:-60px;background:#111;color:#fff;padding:10px 14px;border-radius:8px;z-index:1000}
.skip-link:focus{top:12px}

/* ---------- utility bar (slim strip above the header) ---------- */
.utility-bar{background:var(--navy);color:rgba(255,255,255,.75);font-size:12px}
.utility-bar-inner{max-width:1280px;margin:auto;padding:8px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.utility-left,.utility-right{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.utility-left svg,.utility-right svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:var(--mint-bright);stroke-width:2}
.utility-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.35);flex-shrink:0}
@media(max-width:680px){
  .utility-right{display:none}
  .utility-bar-inner{padding:7px 16px}
}

/* ---------- header (stays light, sits above the dark hero) ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(15,76,92,.08);
}
.header-inner{max-width:1280px;margin:auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand-mark{
  display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid var(--mint-bright);padding:3px;
  box-shadow:0 8px 18px -6px rgba(15,76,92,.5),0 0 0 4px rgba(0,168,150,.12),inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
.brand-copy{display:flex;flex-direction:column;line-height:1.25}
.brand-copy strong{font-size:16.5px;letter-spacing:-.2px;color:var(--brand);display:inline-flex;align-items:center;gap:8px}
.brand-copy span{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.06em;font-weight:600;text-transform:uppercase}
.brand-version{padding:2px 8px;border-radius:999px;background:var(--brand-tint);color:var(--brand);font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.top-nav{display:flex;align-items:center;gap:3px}
.top-nav a{text-decoration:none;color:var(--muted-soft);font-size:14px;font-weight:600;padding:10px 14px;border-radius:var(--radius-control);transition:background .15s ease,color .15s ease}
.top-nav a:hover,.top-nav a:focus-visible,.top-nav a.active{background:var(--brand-tint);color:var(--brand);outline:none}
.top-nav .external-link{
  background:var(--brand);color:#fff;border:1px solid transparent;
  box-shadow:0 10px 22px -10px rgba(15,76,92,.55);
}
.top-nav .external-link:hover{background:var(--brand-dark);color:#fff}

/* ---------- hero: deep mesh-gradient + glassmorphism ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-dark) 0%, var(--brand) 55%, var(--brand-deep) 100%);
  color:#fff;
}
.hero-inner{
  max-width:1280px;margin:auto;min-height:480px;padding:76px 28px 96px;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  align-items:center;gap:56px;position:relative;z-index:2;
}
.hero-glow{position:absolute;border-radius:999px;filter:blur(90px);pointer-events:none;opacity:.55}
.hero-glow-one{width:560px;height:560px;background:var(--cyan);right:auto;left:22%;top:-200px}
.hero-glow-two{width:480px;height:480px;background:var(--mint-bright);right:-140px;left:auto;bottom:auto;top:33%}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(to top, var(--bg), transparent);pointer-events:none;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  padding:8px 14px;border-radius:999px;backdrop-filter:blur(8px);
}
.status-dot{width:7px;height:7px;background:var(--mint-bright);border-radius:50%;box-shadow:0 0 0 4px rgba(16,217,190,.22);animation:nkh-pulse 2.2s ease-in-out infinite}
@keyframes nkh-pulse{0%,100%{box-shadow:0 0 0 4px rgba(16,217,190,.22)}50%{box-shadow:0 0 0 8px rgba(16,217,190,.08)}}

.hero h1{margin:22px 0 16px;font-size:clamp(34px,4.2vw,46px);line-height:1.2;letter-spacing:-.8px;font-weight:800;color:#fff}
.hero h1 span{
  background:linear-gradient(90deg,#fff, var(--mint-bright) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy>p{max-width:560px;margin:0;color:rgba(255,255,255,.78);font-size:16.5px;line-height:1.75}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  min-height:48px;padding:0 22px;border-radius:var(--radius-control);font-weight:700;font-size:14.5px;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.button-primary{background:#fff;color:var(--brand);box-shadow:0 12px 26px -10px rgba(0,0,0,.35)}
.button-primary:hover{background:var(--mint-soft);transform:translateY(-1px)}
.button-secondary{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(6px)}
.button-secondary:hover{background:rgba(255,255,255,.18)}

.hero-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.65);font-size:13px}
.hero-meta strong{color:#fff;font-size:15px;font-weight:700}
.separator{width:4px;height:4px;background:rgba(255,255,255,.35);border-radius:50%}

.hero-panel{
  background:var(--glass-2-bg);border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-lg);border-radius:var(--radius-hero);
  padding:26px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--text);transition:transform .3s ease;
}
.hero-panel:hover{transform:scale(1.01)}
.panel-label{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:var(--mint-soft);color:var(--mint-text);border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.panel-label i{width:6px;height:6px;border-radius:50%;background:var(--mint-text)}

/* photo block inside hero-panel — illustration, 16:10, matches the dark-overlay
   treatment from the Stitch reference. Markup shown in the chat reply. */
.panel-photo{position:relative;border-radius:14px;overflow:hidden;margin-top:14px;aspect-ratio:16/10;box-shadow:0 8px 20px -8px rgba(3,52,62,.35)}
.panel-photo img{width:100%;height:100%;object-fit:cover;display:block}
.panel-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(3,52,62,.88), rgba(3,52,62,.10) 55%, transparent)}
.photo-tag{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);color:#fff;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.24)}
.photo-caption{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;color:#fff}
.photo-caption .eyebrow-line{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mint-bright);font-weight:700;margin-bottom:2px}
.photo-caption .room-line{display:block;font-size:14.5px;font-weight:700}
.feature-icon{width:52px;height:52px;margin:20px 0 16px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(150deg,var(--brand),var(--brand-deep));box-shadow:0 10px 22px -8px rgba(15,76,92,.5)}
.feature-icon svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2}
.feature-blue{background:linear-gradient(150deg,var(--brand),var(--brand-deep))}
.hero-panel h2{font-size:19px;margin:0 0 9px;letter-spacing:-.2px;font-weight:700;color:var(--brand)}
.hero-panel p{color:var(--muted-soft);margin:0;font-size:13.5px;line-height:1.7}
.panel-link{
  margin-top:20px;padding:15px 20px;border-radius:var(--radius-control);
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:#fff;font-weight:700;text-decoration:none;font-size:14px;
  box-shadow:0 14px 28px -12px rgba(3,52,62,.45);
  transition:box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.panel-link:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px -12px rgba(3,52,62,.55);
  background:linear-gradient(135deg,var(--brand-deep) 0%,var(--brand) 100%);
}
.panel-link:hover span{transform:translateX(4px)}
.panel-link span{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.2);transition:.2s;color:#fff;font-size:13px;
}

@media(max-width:960px){
  .top-nav a:not(.external-link){display:none}
  .hero-inner{grid-template-columns:1fr;gap:30px;padding:60px 28px 90px}
  .hero-panel{max-width:600px}
}
@media(max-width:680px){
  .header-inner{padding:12px 16px}
  .brand-copy span{display:none}
  .top-nav .external-link{font-size:12px;padding:9px}
  .hero-inner{padding:48px 18px 76px}
  .hero h1{font-size:32px}
  .hero-copy>p{font-size:15px}
  .hero-actions{display:grid}
  .hero-meta{gap:8px}
  .hero-panel{padding:22px}
}

/* ---------- quick strip ---------- */
.quick-strip{
  max-width:1224px;margin:-56px auto 0;position:relative;z-index:4;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--glass-2-shadow);
  border-radius:var(--radius-card);display:grid;grid-template-columns:repeat(4,1fr);padding:10px;
}
.quick-strip div{
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;border-right:1px solid var(--line-soft);
  border-radius:12px;transition:background .18s ease,transform .18s ease;
}
.quick-strip div:hover{background:var(--surface-soft);transform:translateY(-1px)}
.quick-strip div:last-child{border-right:0}
.quick-strip strong,.quick-strip span{display:block}
.quick-strip strong{font-size:14.5px;margin-bottom:3px;color:var(--text);font-weight:800;letter-spacing:-.2px}
.quick-strip span{font-size:11.5px;color:var(--muted)}

.quick-strip .quick-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
}
.quick-text{display:flex;flex-direction:column;min-width:0}
.quick-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.quick-strip div:nth-child(1) .quick-icon{background:var(--blue-soft);color:var(--blue)}
.quick-strip div:nth-child(2) .quick-icon{background:var(--mint-soft);color:var(--mint-text)}
.quick-strip div:nth-child(3) .quick-icon{background:var(--violet-soft);color:var(--violet)}
.quick-strip div:nth-child(4) .quick-icon{background:var(--amber-soft);color:var(--amber)}

@media(max-width:960px){
  .quick-strip{margin:-40px 22px 0;grid-template-columns:1fr 1fr;gap:4px}
  .quick-strip div:nth-child(2){border-right:0}
  .quick-strip div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
@media(max-width:680px){
  .quick-strip{margin:-32px 14px 0;grid-template-columns:1fr;padding:8px}
  .quick-strip div{border-right:0!important;border-bottom:1px solid var(--line-soft);padding:14px 12px;border-radius:10px}
  .quick-strip div:last-child{border-bottom:0}
}

/* ---------- trust / certification strip ---------- */
.trust-strip{max-width:1280px;margin:auto;padding:28px 28px 0}
.trust-strip-inner{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.trust-badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  background:var(--brand-tint);color:var(--brand);border-radius:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
}
.trust-badge svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:680px){
  .trust-strip{padding:20px 16px 0}
  .trust-strip-inner{justify-content:flex-start}
  .trust-badge{font-size:11.5px;padding:8px 12px}
}

/* ---------- application directory ---------- */
.apps-section{max-width:1280px;margin:auto;padding:72px 28px 54px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}
.section-kicker{font-size:11.5px;letter-spacing:.14em;color:var(--emerald);font-weight:800;text-transform:uppercase}
.section-head h2,.help-card h2{font-size:29px;margin:8px 0 8px;letter-spacing:-.5px;font-weight:800;color:var(--brand)}
.section-head p,.help-card p{margin:0;color:var(--muted)}

.search-wrap{width:min(300px,100%);position:relative}
.search-wrap svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2}
.search-wrap input{width:100%;height:46px;border:1px solid #CBD5E1;border-radius:var(--radius-control);background:rgba(255,255,255,.9);padding:0 16px 0 44px;color:var(--text);outline:none;font-size:14px}
.search-wrap input:focus{border-color:var(--mint);box-shadow:0 0 0 2px rgba(0,168,150,.4)}

.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 28px;background:#EEF2F6;padding:6px;border-radius:14px;width:fit-content;max-width:100%}
.filter-chip{border:0;background:transparent;color:var(--muted-soft);padding:9px 16px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.filter-chip:hover{color:var(--brand)}
.filter-chip.active{background:#fff;color:var(--brand);box-shadow:0 2px 6px -2px rgba(15,76,92,.14)}

.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:960px){ .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:680px){ .app-grid{grid-template-columns:1fr} }

.app-card{
  min-height:250px;background:var(--glass-1-bg);border:1px solid var(--glass-1-border);
  border-radius:var(--radius-card);padding:26px;display:flex;flex-direction:column;
  box-shadow:var(--glass-1-shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.app-card:hover{transform:translateY(-4px);box-shadow:var(--glass-2-shadow);border-color:#CBD5E1;background:var(--glass-2-bg)}
.app-planned{background:linear-gradient(150deg,#fff,#FAFBFC)}

/* active (available) systems get the featured, branded treatment */
.app-active{
  background:linear-gradient(165deg,var(--brand) 0%,var(--brand-deep) 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 24px 46px -20px rgba(3,52,62,.55);
}
.app-active:hover{transform:translateY(-4px);box-shadow:0 30px 56px -18px rgba(3,52,62,.6);background:linear-gradient(165deg,var(--brand) 0%,var(--brand-deep) 100%)}
.app-active .app-code{color:rgba(255,255,255,.6)}
.app-card.app-active h3{color:#fff}
.app-card.app-active p{color:rgba(255,255,255,.75)}
.app-active .card-footer{border-top:0;padding-top:0}
.app-active .app-open{
  color:#fff;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-control);
  padding:11px 15px;
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.app-active .app-open:hover{background:var(--mint-bright);border-color:var(--mint-bright);color:var(--brand-deep);transform:translateY(-1px)}
.app-active .app-open span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18)}
.app-active .app-open:hover span{background:rgba(3,52,62,.15)}
.app-active .badge-active{background:rgba(255,255,255,.18);color:#fff}
.app-active .app-icon{background:rgba(255,255,255,.16);color:#fff}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.app-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-size:13px;font-weight:800;transition:background .2s ease,color .2s ease;
}
.app-card:not(.app-active):hover .app-icon{background:var(--brand);color:#fff}
.theme-blue{background:var(--blue-soft);color:var(--blue)}
.theme-emerald{background:var(--emerald-soft);color:var(--emerald)}
.theme-amber{background:var(--amber-soft);color:var(--amber)}
.theme-violet{background:var(--violet-soft);color:var(--violet)}
.theme-cyan{background:var(--cyan-soft);color:#0E7490}
.teal{background:var(--teal-soft);color:var(--teal)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:10.5px;font-weight:700}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-active{background:var(--mint-soft);color:var(--mint-text);border:1px solid rgba(0,168,150,.25)}
.badge-active i{
  background:var(--mint-bright);
  animation:badge-pulse-mint 1.8s ease-out infinite;
}
.app-active .badge-active i{animation-name:badge-pulse-white}
@keyframes badge-pulse-mint{
  0%{box-shadow:0 0 0 0 rgba(16,217,190,.55)}
  70%{box-shadow:0 0 0 7px rgba(16,217,190,0)}
  100%{box-shadow:0 0 0 0 rgba(16,217,190,0)}
}
@keyframes badge-pulse-white{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.badge-planned{background:#F1F5F9;color:var(--muted)}

.card-body{padding-top:20px;flex:1}
.app-code{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:#94A3B8}
.app-card h3{font-size:17.5px;line-height:1.35;margin:6px 0 9px;font-weight:700;letter-spacing:-.2px;color:var(--brand)}
.app-card p{font-size:13.5px;color:var(--muted-soft);margin:0;line-height:1.65}
.card-footer{margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft)}
.app-open{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--brand);font-size:13.5px;font-weight:700}
.app-open:hover span{transform:translateX(4px)}
.app-open span{transition:.2s}
.app-coming{font-size:12.5px;color:#94A3B8}

.empty-state{text-align:center;padding:44px;background:var(--surface);border:1px dashed #CBD5E1;border-radius:var(--radius-card)}
.empty-state strong,.empty-state span{display:block}
.empty-state strong{font-size:15px;color:var(--brand)}
.empty-state span{margin-top:5px;color:var(--muted-soft)}

/* ---------- help section ---------- */
.help-section{max-width:1280px;margin:auto;padding:16px 28px 70px}
.help-card{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--brand-dark) 0%, var(--brand) 55%, var(--brand-deep) 100%);
  color:#fff;border-radius:var(--radius-hero);
  padding:42px 46px;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;
  box-shadow:0 30px 60px -24px rgba(3,52,62,.55);
}
.help-card::before{
  content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,168,150,.28), rgba(0,168,150,0) 70%);
  filter:blur(20px);pointer-events:none;
}
.help-card>*{position:relative}
.help-card .section-kicker{color:var(--mint-bright)}
.help-card p{color:rgba(255,255,255,.72)}
.help-notes{display:grid;gap:10px}
.help-notes div{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:13px 15px;border-radius:14px;backdrop-filter:blur(6px)}
.help-notes span{display:grid;place-items:center;min-width:28px;height:28px;background:var(--mint-bright);color:var(--brand-dark);border-radius:9px;font-size:10.5px;font-weight:800}
.help-notes p{font-size:12.5px;margin:4px 0 0;line-height:1.6;color:rgba(255,255,255,.85)}

@media(max-width:960px){ .help-card{grid-template-columns:1fr} }
@media(max-width:680px){
  .apps-section{padding:56px 16px 42px}
  .section-head{display:grid;align-items:start}
  .search-wrap{width:100%}
  .help-section{padding:10px 16px 45px}
  .help-card{padding:28px 22px;gap:26px}
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);background:var(--surface-soft);
}
.footer-grid{
  max-width:1280px;margin:auto;padding:52px 28px 34px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
}
.footer-col h3{margin:0 0 16px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer-col ul a{text-decoration:none;color:var(--muted-soft);font-size:13.5px;transition:color .15s ease}
.footer-col ul a:hover{color:var(--mint-text)}
.footer-col ul li{font-size:13.5px;color:var(--muted-soft);line-height:1.6}
.footer-placeholder{color:#B45309;font-style:italic}

.footer-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-brand-row .brand-mark{
  flex:0 0 40px;width:40px;height:40px;
}
.footer-brand-row strong{display:block;font-size:14.5px;font-weight:700;color:var(--brand)}
.footer-brand-row span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.footer-note{margin:0;font-size:13px;color:var(--muted);line-height:1.7;max-width:320px}

.footer-bottom{
  background:linear-gradient(115deg,var(--brand-dark) 0%,var(--brand) 55%,var(--brand-deep) 100%);
}
.footer-bottom-inner{
  max-width:1280px;margin:auto;padding:16px 28px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:12px;color:rgba(255,255,255,.78);
}
.footer-bottom-inner strong{color:#fff;font-weight:700}
.footer-bottom-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tls-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;font-size:11px;color:rgba(255,255,255,.9);font-weight:600;backdrop-filter:blur(6px);
}
.tls-badge svg{width:12px;height:12px;fill:none;stroke:var(--mint-bright);stroke-width:2}
@media(max-width:680px){
  .footer-bottom-inner{padding:16px 16px}
}

@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;padding:44px 24px 30px}
  .footer-col.footer-brand{grid-column:1 / -1}
}
@media(max-width:680px){
  .footer-grid{grid-template-columns:1fr;padding:36px 16px 24px;gap:28px}
  .footer-bottom{padding:16px 16px 22px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}