/* HKUIUX shared page system — extracted from ai-design.html
   Loaded after site.css to unify typography & component styling site-wide. */

/* === Tokens =============================================================== */
:root{
  --bg:#07070A;
  --surface:#0B0B10;
  --surface-2:#13131A;
  --surface-3:#1C1C26;
  --text:#ECECEE;
  --text-muted:#9A9AA4;
  --text-faint:#5C5C66;
  --accent:#FF7A1A;
  --accent-2:#FFB070;
  --line:rgba(255,255,255,0.08);
}

/* === Base typography ====================================================== */
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--type-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:0;
}
html[lang="zh-Hans"] body{
  font-family:var(--font-body-sc);
}
html[lang="en"] body,
html[lang="en-US"] body{
  font-family:var(--font-body-en);
}
p,li{font-size:1rem;font-weight:400;line-height:1.75}
strong,b{font-weight:600}

.font-display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:0;
}
html[lang="zh-Hans"] .font-display{font-family:var(--font-display-sc)}
html[lang="en"] .font-display,
html[lang="en-US"] .font-display{font-family:var(--font-display-en);font-weight:800}

.hero-title .font-display,
.font-display.italic,
.type-highlight{
  font-family:var(--font-display) !important;
  font-style:normal !important;
  font-weight:900;
  letter-spacing:0;
  font-size:inherit;
  color:var(--accent) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  white-space:normal;
}
html[lang="zh-Hans"] .hero-title .font-display,
html[lang="zh-Hans"] .font-display.italic,
html[lang="zh-Hans"] .type-highlight{
  font-family:var(--font-display-sc) !important;
}
html[lang="en"] .hero-title .font-display,
html[lang="en"] .font-display.italic,
html[lang="en"] .type-highlight,
html[lang="en-US"] .hero-title .font-display,
html[lang="en-US"] .font-display.italic,
html[lang="en-US"] .type-highlight{
  font-family:var(--font-display-en) !important;
  font-weight:900;
  font-size:inherit;
}

.hero-title .hl-lead{
  font-family:var(--font-display) !important;
  font-style:normal !important;
  font-weight:900;
  color:var(--accent) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  font-size:1em;
  letter-spacing:0;
  line-height:1;
  display:inline-block;
  margin-right:0.06em;
}
html[lang="zh-Hans"] .hero-title .hl-lead{font-family:var(--font-display-sc) !important}
html[lang="en"] .hero-title .hl-lead,
html[lang="en-US"] .hero-title .hl-lead{font-size:1em}

.font-extrabold,.font-bold,.font-black{font-weight:800 !important}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:0;
  line-height:1.18;
}
h1:not([class*="text-sm"]){font-size:var(--type-h1) !important}
h2:not([class*="text-sm"]){font-size:var(--type-h2) !important}
h3:not([class*="text-sm"]){font-size:var(--type-h3) !important}
h4:not([class*="text-sm"]){font-size:var(--type-h4) !important}
h1 > span,h2 > span,h3 > span{font-size:inherit !important;line-height:inherit !important}
h1.font-display,h2.font-display,h3.font-display{font-family:var(--font-display);font-weight:800}
.font-display.font-bold,
.font-display.font-black,
.font-display.font-extrabold{font-weight:900 !important}
html:lang(zh-Hant) h1,html:lang(zh-Hant) h2,html:lang(zh-Hant) h3,
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3{font-weight:900}

.mono,.font-mono{font-family:var(--font-mono);letter-spacing:0.03em;font-weight:400}
.italic,em,i{font-style:normal !important}

.site-brand .brand-wordmark,
.foot-brand .brand-wordmark{font-weight:800}

/* === Pill / Tag =========================================================== */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,0.03);
  font-size:11px;color:var(--text-muted);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* === Buttons ============================================================== */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#0B0B10;
  padding:14px 22px;border-radius:999px;
  font-weight:700;font-size:14px;
  transition:all .25s ease;border:0;cursor:pointer;
}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 14px 28px -16px rgba(255,122,26,0.6)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 22px;border-radius:999px;
  border:1px solid var(--line);color:var(--text);
  background:rgba(255,255,255,0.02);
  font-size:14px;font-weight:500;transition:all .25s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18)}

/* === Cards (generic) ====================================================== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;transition:all .3s}
.card:hover{border-color:rgba(255,255,255,0.16);background:var(--surface-2)}
.card-soft{background:rgba(255,255,255,0.02);border:1px solid var(--line);border-radius:14px;padding:20px}

/* === Bento grid =========================================================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento > *{border-radius:18px;overflow:hidden;position:relative;border:1px solid var(--line);background:var(--surface)}
.bento .b1{grid-column:span 4;grid-row:span 2;min-height:380px}
.bento .b2{grid-column:span 2;min-height:182px}
.bento .b3{grid-column:span 2;min-height:182px}
.bento .b4{grid-column:span 3;min-height:240px}
.bento .b5{grid-column:span 3;min-height:240px}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento>*{grid-column:span 2!important;grid-row:auto!important;min-height:220px}
}
.tile-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s}
.tile-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(7,7,10,0.9) 100%)}
.bento>*:hover .tile-img{transform:scale(1.05)}
.tile-meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.tile-tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:500;color:var(--text);background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);margin-bottom:10px}
.tile-title{font-size:18px;font-weight:600;color:#fff}
.tile-sub{font-size:12px;color:rgba(255,255,255,0.65);margin-top:2px}

/* === Row list ============================================================= */
.row-list .row{display:grid;grid-template-columns:80px 1fr auto;gap:32px;padding:28px 0;border-top:1px solid var(--line);align-items:center;transition:background .3s}
.row-list .row:hover{background:linear-gradient(90deg,rgba(255,122,26,0.04),transparent 70%)}
.row-list .row .num{font-family:var(--font-mono);color:var(--text-faint);font-size:12px;letter-spacing:0.05em}
.row-list .row .title{font-weight:600;font-size:18px}
.row-list .row .desc{color:var(--text-muted);font-size:13.5px;margin-top:4px}

/* === Step (process) ======================================================= */
.step{padding:24px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:all .3s}
.step:hover{border-color:rgba(255,255,255,0.16);background:var(--surface-2)}
.step .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--accent);background:rgba(255,122,26,0.1);border:1px solid rgba(255,122,26,0.22)}

/* === Hero shared ========================================================== */
.hero-title{
  font-family:var(--font-body);
  font-size:var(--type-hero) !important;
  font-weight:900;
  letter-spacing:0;
  line-height:1.12;
  text-shadow:0 2px 24px rgba(0,0,0,0.55);
}
.hero-title.index-hero-title{
  font-size:clamp(41px,5.3vw,72px) !important;
}
.hero-title.index-hero-title .text-gold-gradient{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--accent) !important;
  color:var(--accent) !important;
  text-shadow:0 2px 22px rgba(0,0,0,0.58),0 0 16px rgba(255,122,26,0.16);
}
.hero-title.index-hero-title .font-display{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
  text-shadow:0 2px 24px rgba(0,0,0,0.72);
}
.hero-title .font-display{line-height:1}
.mobile-title-break{display:none}
@media(max-width:767px){
  body[data-active="home"] .home-hero{
    height:calc(100svh - var(--site-header-h)) !important;
    min-height:0;
  }
  body[data-active="home"] .home-hero-inner{
    align-items:flex-start !important;
    padding-top:clamp(42px,7svh,68px) !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  body[data-active="home"] .home-hero-kicker{
    max-width:calc(100vw - 36px);
    padding:7px 14px !important;
    margin-bottom:22px !important;
    font-size:11px !important;
    letter-spacing:0.16em !important;
  }
  .hero-title{
    max-width:min(100%, calc(100vw - 32px));
    overflow-wrap:anywhere;
    word-break:normal;
    text-wrap:balance;
  }
  body[data-active="home"] .hero-title.index-hero-title{
    margin-bottom:20px !important;
    font-size:clamp(36px,10.5vw,42px) !important;
    line-height:1.08;
    overflow-wrap:normal;
    text-wrap:initial;
  }
  body[data-active="home"] .hero-title.index-hero-title .font-display{
    display:inline-block;
    margin-bottom:10px;
  }
  body[data-active="home"] .hero-title.index-hero-title .text-gold-gradient{
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    font-size:clamp(36px,10.3vw,42px) !important;
    line-height:1.08;
  }
  body[data-active="home"] .mobile-title-pre,
  body[data-active="home"] .mobile-title-final{
    display:inline-block;
    white-space:nowrap;
  }
  body[data-active="home"] .mobile-title-break{
    display:block;
  }
  body[data-active="home"] .hero-sub{
    margin-bottom:24px !important;
    padding-left:4px !important;
    padding-right:4px !important;
    font-size:clamp(14px,3.65vw,16px) !important;
    line-height:1.58;
  }
  body[data-active="home"] .home-hero-actions{
    flex-direction:row !important;
    gap:10px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body[data-active="home"] .home-hero-actions .btn-primary,
  body[data-active="home"] .home-hero-actions .btn-dark{
    flex:1 1 0;
    min-width:0;
    padding:12px 10px !important;
    font-size:15px !important;
  }
  html[lang="en"] body[data-active="home"] .hero-title.index-hero-title .text-gold-gradient,
  html[lang="en-US"] body[data-active="home"] .hero-title.index-hero-title .text-gold-gradient{
    max-width:min(100%, 14ch);
    font-size:clamp(27px,7.4vw,32px) !important;
    line-height:1.12;
  }
  body[data-active="ai"] .hero-title{
    font-size:clamp(27px,7.6vw,34px) !important;
    line-height:1.18;
    max-width:min(100%, calc(100vw - 32px));
  }
  html[lang="en"] body[data-active="ai"] .hero-title,
  html[lang="en-US"] body[data-active="ai"] .hero-title{
    font-size:clamp(24px,6.8vw,30px) !important;
  }
}
@media(max-width:380px){
  body[data-active="home"] .home-hero-inner{
    padding-top:clamp(32px,5.5svh,52px) !important;
  }
  body[data-active="home"] .home-hero-kicker{
    margin-bottom:18px !important;
    font-size:10px !important;
    letter-spacing:0.12em !important;
  }
  body[data-active="home"] .hero-title.index-hero-title{
    margin-bottom:16px !important;
    font-size:clamp(32px,9.4vw,36px) !important;
  }
  body[data-active="home"] .hero-title.index-hero-title .text-gold-gradient{
    font-size:clamp(31px,9.1vw,35px) !important;
  }
  body[data-active="home"] .hero-sub{
    margin-bottom:20px !important;
    font-size:clamp(13px,3.55vw,15px) !important;
    line-height:1.52;
  }
  body[data-active="home"] .home-hero-actions .btn-primary,
  body[data-active="home"] .home-hero-actions .btn-dark{
    padding:11px 8px !important;
    font-size:14px !important;
  }
  html[lang="en"] body[data-active="home"] .hero-title.index-hero-title .text-gold-gradient,
  html[lang="en-US"] body[data-active="home"] .hero-title.index-hero-title .text-gold-gradient{
    font-size:clamp(24px,6.8vw,29px) !important;
  }
  body[data-active="ai"] .hero-title{
    font-size:clamp(25px,7vw,31px) !important;
  }
  html[lang="en"] body[data-active="ai"] .hero-title,
  html[lang="en-US"] body[data-active="ai"] .hero-title{
    font-size:clamp(22px,6.4vw,28px) !important;
  }
}
.hero-sub{
  font-size:clamp(15px, 1.08vw, 18px) !important;
  line-height:1.75;
  text-shadow:0 1px 14px rgba(0,0,0,0.45);
}
.hero-vignette-soft{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 18% 28%, rgba(255,122,26,0.18), transparent 32%),radial-gradient(circle at 82% 22%, rgba(122,75,255,0.12), transparent 30%),radial-gradient(circle at 50% 85%, rgba(0,0,0,0.18), transparent 35%)}
.grid-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.28;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.1));mask-image:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.1))}
.grain{position:relative}
.grain::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");opacity:0.04;mix-blend-mode:overlay}

/* === Reveal animations ==================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* === Section spacing ====================================================== */
.section{padding:96px 0}
.section-tight{padding:64px 0}
@media (max-width:768px){.section{padding:64px 0}.section-tight{padding:40px 0}}

/* === Override per-page navy/Tailwind colour kits to dark theme ============= */
.bg-navy-950,.bg-navy-900,.bg-slate-950,.bg-slate-900{background:var(--bg) !important}
.bg-navy-800,.bg-slate-800{background:var(--surface) !important}
.text-slate-300,.text-slate-400{color:var(--text-muted) !important}
.text-slate-500{color:var(--text-faint) !important}
.text-brand-500,.text-brand-600,.text-brand-700,
.text-orange-500,.text-orange-600,.text-orange-700{color:var(--accent) !important}
.text-brand-gradient,.text-gold-gradient{
  font-family:var(--font-display) !important;
  font-weight:900;
  background:none !important;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor !important;
  color:var(--accent) !important;
  font-style:normal !important;
  white-space:normal;
}
html[lang="zh-Hans"] .text-brand-gradient,
html[lang="zh-Hans"] .text-gold-gradient{font-family:var(--font-display-sc) !important}
html[lang="en"] .text-brand-gradient,
html[lang="en-US"] .text-brand-gradient,
html[lang="en"] .text-gold-gradient,
html[lang="en-US"] .text-gold-gradient{font-family:var(--font-display-en) !important}
.border-brand-500\/30{border-color:rgba(255,122,26,0.3) !important}
.bg-brand-500\/10{background:rgba(255,122,26,0.1) !important}

/* === Hero min-height fix — keep content above the fold but still allow next section to show =
   The fixed header occupies 64-72px; min-h-screen + flex centering pushes
   subsequent sections one full viewport down on first load. Cap at 92vh. */
.min-h-screen.flex.items-center{min-height:calc(100vh - 72px)}
@media (max-width:1023px){.min-h-screen.flex.items-center{min-height:calc(100vh - 64px)}}

/* === Pricing / Portfolio sub navigation ================================== */
body[data-active="pricing"] .category-nav,
body[data-active="portfolio"] .category-nav{
  position:sticky;
  top:var(--site-header-h,72px) !important;
  z-index:55;
  margin-top:0;
  background:rgba(7,7,10,0.86) !important;
  border-top:0 !important;
  border-bottom:1px solid rgba(255,255,255,0.12) !important;
  box-shadow:0 18px 40px -28px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body[data-active="pricing"] .category-nav > div,
body[data-active="portfolio"] .category-nav > div{
  max-width:1180px;
  justify-content:flex-start;
  gap:10px;
  padding-top:14px;
  padding-bottom:14px;
  scroll-padding-inline:16px;
}
@media (min-width:1024px){
  body[data-active="pricing"] .category-nav > div,
  body[data-active="portfolio"] .category-nav > div{justify-content:center}
}
body[data-active="pricing"] .cat-btn,
body[data-active="portfolio"] .cat-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 20px !important;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.055) !important;
  color:rgba(236,236,238,0.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06) !important;
  letter-spacing:0.01em;
  transform:none;
  transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}
body[data-active="pricing"] .cat-btn:hover,
body[data-active="portfolio"] .cat-btn:hover{
  background:rgba(255,122,26,0.14) !important;
  border-color:rgba(255,122,26,0.55) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 12px 28px -22px rgba(255,122,26,0.75), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body[data-active="pricing"] .cat-btn.active,
body[data-active="portfolio"] .cat-btn.active{
  background:linear-gradient(90deg,#EA580C 0%,#F97316 60%,#FFB070 100%) !important;
  border-color:rgba(255,122,26,0.9) !important;
  color:#0B0B10 !important;
  box-shadow:0 16px 34px -20px rgba(255,122,26,0.9) !important;
  transform:none;
}

/* === Utility: thin divider ================================================ */
.hr-line{height:1px;background:var(--line);border:0;margin:0}