:root {
  --gn-green: #2F5D62;
  --gn-green-dark: #244A4E;
  --gn-black: #0E1111;
  --gn-gray: #6B7280;
  --gn-border: #E5E7EB;
  --gn-bg: #F8FAFA;
}

body {
  margin: 0;
  font-family: Inter, "Noto Sans HK", system-ui;
  color: var(--gn-black);
}

.container {
  max-width: 1140px;
  margin: auto;
  padding: 80px 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gn-border);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 800;
  color: var(--gn-green);
  text-decoration: none;
}

nav a {
  margin-left: 28px;
  text-decoration: none;
  color: var(--gn-black);
}

/* Button */
.btn {
  background: var(--gn-green);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

/* Hero Video */
.hero-video {
  position: relative;
  min-height: 100vh;
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* filter: grayscale(100%); */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.9);
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Hero video: keep full visibility */
.hero-video .hero-bg {
  opacity: 1;
}

/* Optional: keep a light overlay for color consistency (not dark) */
.hero-video .hero-overlay {
  opacity: 0.25; /* 你可以 0.15 - 0.35 之間試 */
}

/* Text banner */
.hero-banner {
  display: inline-block;
  max-width: 680px;
  padding: 20px 22px;
  border-radius: 18px;

  /* glass banner */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* subtle border */
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Improve readability */
.hero-banner h1,
.hero-banner p,
.hero-banner .price {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Mobile spacing */
@media (max-width: 640px) {
  .hero-banner {
    max-width: 100%;
    padding: 16px 16px;
    border-radius: 16px;
  }
}

/* Footer */
.site-footer {
  background: var(--gn-bg);
  border-top: 1px solid var(--gn-border);
  text-align: center;
}

/* ===============================
   Contact Page
================================ */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.contact-info p {
  color: var(--gn-gray);
  max-width: 420px;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 32px 0;
}

.contact-list li {
  margin-bottom: 20px;
  font-size: 15px;
}

.contact-list a {
  color: var(--gn-green);
  text-decoration: none;
  font-weight: 600;
}

.map {
  margin-top: 32px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--gn-border);
}

.map iframe {
  width: 100%;
  height: 260px;
  border: 0;
}

/* Form side */
.contact-form {
  background: #fff;
  border: 1px solid var(--gn-border);
  border-radius: 24px;
  padding: 40px;
}

/* Contact form spacing: captcha + submit button */
.contact-form-wrapper .g-recaptcha {
  margin-top: 14px;
}

.contact-form-wrapper button.btn {
  margin-top: 14px;
  width: 100%;
}

/* Optional: align button style with nav CTA if needed */
.contact-form-wrapper button.btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  text-align: center;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea,
.contact-form-wrapper button.btn {
  width: 100%;
  box-sizing: border-box;
}

.contact-form-wrapper button.btn {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  border: none;
}

/* Mobile */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 32px;
  }
}

/* ===============================
   WhatsApp Floating CTA
================================ */

.whatsapp-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--gn-green);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transition: all .25s ease;
}

.whatsapp-cta:hover {
  background: var(--gn-green-dark);
  transform: translateY(-2px);
}

.wa-icon {
  font-size: 18px;
  line-height: 1;
}

.wa-text {
  font-size: 14px;
  white-space: nowrap;
}

/* Mobile：只留 icon，唔遮內容 */
@media (max-width: 768px) {
  .whatsapp-cta {
    padding: 14px;
  }

  .wa-text {
    display: none;
  }
}

/* ===============================
   Portfolio Hover Video
================================ */

.intro {
  color: var(--gn-gray);
  max-width: 520px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.portfolio-item {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--gn-border);
  background: #fff;
  transition: transform .25s ease;
}

.portfolio-item:hover {
  transform: translateY(-4px);
}

.portfolio-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.portfolio-media img,
.portfolio-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* hover 播片 */
@media (hover: hover) {
  .portfolio-item:hover video {
    opacity: 1;
  }

  .portfolio-item:hover img {
    opacity: 0;
  }
}

/* Info */
.portfolio-info {
  padding: 20px 22px 24px;
}

.portfolio-info h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.portfolio-info p {
  margin: 0;
  font-size: 14px;
  color: var(--gn-gray);
}

.recaptcha-wrap {
  margin: 24px 0 32px;
}

/* ===============================
   Form Status Message
================================ */

.form-status {
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 14px;
}

.form-status.success {
  background: rgba(47,93,98,.1);
  color: var(--gn-green);
  border: 1px solid rgba(47,93,98,.25);
}

.form-status.error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

/* ===============================
   Contact Page (FIXED)
================================ */

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: flex-start;
}

.contact-details p {
  color: var(--gn-gray);
  max-width: 420px;
}

.details-list {
  list-style: none;
  padding: 0;
  margin: 32px 0;
}

.details-list li {
  margin-bottom: 18px;
  font-size: 15px;
}

.details-list a {
  color: var(--gn-green);
  text-decoration: none;
  font-weight: 600;
}

.map {
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gn-border);
}

.map iframe {
  width: 100%;
  height: 240px;
  border: 0;
}

/* Form */
.contact-form-wrapper {
  background: #fff;
  border: 1px solid var(--gn-border);
  border-radius: 20px;
  padding: 32px;
}

.contact-form-wrapper label {
  display: block;
  margin-top: 18px;
  font-weight: 600;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--gn-border);
}

.recaptcha-wrap {
  margin: 24px 0;
}

/* Mobile */
@media (max-width: 900px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Contact Form Spacing Polish
================================ */

/* 外框保持，但入面內容收窄 */
.contact-form-wrapper {
  padding: 40px 48px; /* 原本 32px → 拉開左右空間 */
}

/* Form 本身再限制闊度 */
/* .contact-form-wrapper form {
  max-width: 420px;   
} */

/* Mobile 唔好太窄 */
@media (max-width: 900px) {
  .contact-form-wrapper {
    padding: 32px 24px;
  }

  .contact-form-wrapper form {
    max-width: 100%;
  }
}

/* ===============================
   Pricing Page
================================ */

.pricing-section {
  text-align: center;
}

.pricing-header h1 {
  font-size: clamp(36px, 5vw, 48px);
  margin-bottom: 16px;
}

.pricing-header p {
  color: var(--gn-gray);
  max-width: 520px;
  margin: 0 auto 64px;
  font-size: 17px;
}

/* Cards */
.pricing-cards {
  display: flex;
  justify-content: center;
}

.pricing-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--gn-border);
  border-radius: 28px;
  padding: 48px 36px;
  background: #fff;
}

/* Featured */
.pricing-card.featured {
  border-color: var(--gn-green);
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

.badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gn-green);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* Price */
.price {
  margin: 32px 0 8px;
}

.price .currency {
  font-size: 24px;
  vertical-align: top;
}

.price .amount {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.price-note {
  color: var(--gn-gray);
  font-size: 14px;
  margin-bottom: 32px;
}

/* Features */
.features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  text-align: left;
}

.features li {
  margin-bottom: 14px;
  font-size: 15px;
  padding-left: 22px;
  position: relative;
}

.features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gn-green);
  font-weight: 700;
}

/* CTA */
.pricing-btn {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.pricing-link {
  display: block;
  font-size: 14px;
  color: var(--gn-green);
  text-decoration: none;
  font-weight: 600;
}

.pricing-btn {
  width: 100%;
  box-sizing: border-box; /* 關鍵 */
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  isolation: isolate;
}

main {
  position: relative;
  z-index: 1;
}

/* ===============================
   AI Video Page
================================ */

.ai-hero {
  text-align: center;
  padding-top: 40px;
}

.ai-hero .lead {
  font-size: 18px;
  color: var(--gn-gray);
  margin-top: 20px;
}

.ai-section {
  margin-top: 80px;
}

.ai-section.highlight {
  background: var(--gn-bg);
  border-radius: 32px;
  padding: 64px;
}

.ai-section.soft {
  background: #fafafa;
  border-radius: 32px;
  padding: 64px;
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.ai-card {
  border: 1px solid var(--gn-border);
  border-radius: 20px;
  padding: 28px;
  background: #fff;
}

.ai-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.ai-steps .step {
  text-align: center;
}

.ai-steps span {
  display: inline-block;
  font-size: 28px;
  font-weight: 800;
  color: var(--gn-green);
  margin-bottom: 12px;
}

.ai-points {
  list-style: none;
  padding: 0;
  margin-top: 32px;
}

.ai-points li {
  margin-bottom: 14px;
  padding-left: 22px;
  position: relative;
}

.ai-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gn-green);
  font-weight: 700;
}

.ai-cta {
  text-align: center;
  padding: 100px 24px;
}

.ai-visual img,
.ai-process-visual img,
.ai-emotion img {
  width: 100%;
  border-radius: 24px;
}

.ai-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}

.ai-compare img {
  width: 100%;
  border-radius: 20px;
}

.ai-compare p {
  text-align: center;
  margin-top: 12px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .ai-compare {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Mobile Hamburger Menu
================================ */

/* Header inner layout */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hamburger button */
.nav-toggle {
  display: none;
  width: 32px;
  height: 24px;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gn-black);
  transition: all .25s ease;
}

.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 22px; }

/* Mobile nav */
@media (max-width: 900px) {

  .nav-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--gn-border);
    display: none;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
  }

  .main-nav a {
    margin: 0;
    font-size: 16px;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-cta {
    margin-top: 12px;
    width: fit-content;
  }
}

/* Animate hamburger → X */
.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 11px;
}

/* ===============================
   FAQ Page
================================ */

.faq-section {
  max-width: 900px;
}

.faq-intro {
  color: var(--gn-gray);
  margin: 16px 0 48px;
  font-size: 16px;
}

.faq-list {
  display: grid;
  gap: 40px;
}

.faq-item h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.faq-item p {
  margin-bottom: 12px;
}

.faq-item ul {
  padding-left: 20px;
  margin: 12px 0;
}

.faq-item li {
  margin-bottom: 6px;
}

.faq-cta {
  margin-top: 80px;
  text-align: center;
}

@media (max-width: 768px) {

  /* 🔒 鎖死 viewport，防任何元素爆 */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* container 唔好再限制闊度 */
  .pricing-section.container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 每次只顯示一格 */
  .pricing-cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* 卡片 = 100% 畫面 */
  .pricing-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  /* 價錢數字防爆（重點） */
  .price {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .price .amount {
    font-size: 38px;
    line-height: 1;
    max-width: 100%;
    word-break: break-word;
  }

  .price .currency {
    font-size: 18px;
  }

  /* feature list 防長字撐爆 */
  .features,
  .features li {
    max-width: 100%;
    word-break: break-word;
  }

  /* CTA button 永遠唔爆 */
  .pricing-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

}

/* ===============================
   Header Slim Down
================================ */

.site-header {
  padding: 12px 0;   /* 原本通常係 24–32px，而家減半 */
}

.header-inner {
  padding: 0;        /* 確保唔疊加厚度 */
  min-height: 56px;  /* 控制最終高度（原本多數 80–90px） */
}

@media (max-width: 768px) {
  .site-header .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.site-header .logo img {
  height: 32px;        /* 🔑 關鍵：控制高度 */
  width: auto;         /* 保持比例 */
  max-width: 100%;     /* 防止橫向爆 */
  display: block;
}

.ai-visual img {
  width: 100%;
  height: auto;
  max-height: 420px;   /* Desktop 視覺上限 */
  object-fit: cover;
  border-radius: 24px;
}

@media (max-width: 768px) {

  .ai-visual {
    margin-top: 12px;
  }

  .ai-visual img {
    max-height: 240px;   /* 🔑 mobile hero 視覺高度 */
  }

}

/* ===============================
   AI page hero spacing fix
================================ */

/* Hero 文字區縮短上下空白 */
.ai-hero.container {
  padding-top: 40px;
  padding-bottom: 16px;
}

/* Hero 圖片區幾乎唔要上下 padding */
.ai-visual.container {
  padding-top: 0;
  padding-bottom: 24px;
}

@media (max-width: 768px) {

  .ai-hero.container {
    padding-top: 24px;
    padding-bottom: 8px;
  }

  .ai-visual.container {
    padding-bottom: 16px;
  }

}

.portfolio-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* thumbnail 保持原樣 */
}

.portfolio-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 🔑 直片完整顯示 */
  background: #000;    /* 黑邊自然 */
}

.hero-price {
  margin-bottom: 24px; /* 拉開價錢同 CTA */
}

@media (max-width: 768px) {
  .hero-price {
    margin-bottom: 20px;
  }
}

.hero-content .price {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .hero-content .price {
    margin-bottom: 20px;
  }
}

/* ===============================
   Why AI Ads - 2x2 Grid
================================ */

.why-ai {
  margin-top: 80px;
}

.why-ai h2 {
  text-align: center;
  margin-bottom: 48px;
}

.why-ai-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.why-ai-item {
  padding: 32px;
  border: 1px solid var(--gn-border);
  border-radius: 20px;
  background: #fff;
}

.why-ai-item h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.why-ai-item p {
  color: var(--gn-gray);
  line-height: 1.6;
}

/* Mobile：變 1 column */
@media (max-width: 768px) {
  .why-ai-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   FAQ Page - Mobile Optimisation
================================ */

@media (max-width: 768px) {

  /* 每條 FAQ 拉開距離，易讀 */
  .faq-item {
    margin-bottom: 40px;
  }

  /* 段落與 list 行距，mobile 讀得舒服 */
  .faq-item p,
  .faq-item li {
    line-height: 1.75;
  }

  /* list 縮排與間距調整 */
  .faq-item ul {
    padding-left: 20px;
    margin: 12px 0;
  }

  /* FAQ 標題同內容之間留少少位 */
  .faq-item h3 {
    margin-bottom: 12px;
  }

  /* 底部 CTA 同內容分開 */
  .faq-cta {
    margin-top: 48px;
  }

}

/* ===============================
   Contact Page - Mobile UX Fix
================================ */

@media (max-width: 768px) {

  .contact-form-wrapper {
    padding: 0 8px;
  }

  .contact-form-wrapper label {
    margin-top: 16px;
    margin-bottom: 6px;
    display: block;
  }

  .contact-form-wrapper input,
  .contact-form-wrapper textarea {
    padding: 14px 12px;
    font-size: 16px; /* 防 iOS 自動 zoom */
  }

  .contact-form-wrapper .btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    margin-top: 8px;
  }

  .recaptcha-wrap {
    margin: 20px 0 24px;
  }

  .map iframe {
    height: 180px;
    border-radius: 12px;
  }

  .form-status {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  .form-status.success {
    background: #e7f7ef;
    color: #207a4c;
  }

  .form-status.error {
    background: #fdecea;
    color: #b42318;
  }

}

/* ===============================
   Contact Page - Mobile Overflow Fix
================================ */

@media (max-width: 768px) {

  /* 🔒 防 input / textarea 爆出 container */
  .contact-form-wrapper,
  .contact-form-wrapper * {
    box-sizing: border-box;
  }

  /* 表單左右留安全邊距 */
  .contact-form-wrapper {
    padding: 0 16px 24px; /* 🔑 底部加 padding */
  }

  /* Input / textarea 寬度鎖死 */
  .contact-form-wrapper input,
  .contact-form-wrapper textarea {
    width: 100%;
    max-width: 100%;
  }

  /* Submit button 唔貼底 */
  .contact-form-wrapper .btn {
    margin-top: 12px;
  }

}