@property --glow-c1 {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --glow-c2 {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

/* Custom variables for Alcove style with Apple Blue */
:root {
  --bg-color: #FFFFFF;
  --bg-darker: #F5F7FA;
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --accent-blue: #007AFF;
  --accent-light: rgba(0, 122, 255, 0.1);
  --btn-bg: #111111;
  --btn-text: #FFFFFF;
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/*
  Custom mapping for Japanese mode:
  Ensures Hiragino Sans is ONLY used for Japanese characters (Kanji, Hiragana, Katakana, and Japanese symbols).
  This allows SF Pro Display or Pretendard to handle English and Numbers in the same stack.
*/
@font-face {
  font-family: "HiraginoOnly";
  src: local("Hiragino Sans"), local("Hiragino Kaku Gothic ProN"), local("Hiragino Sans GB");
  unicode-range: U+3000-30FF, U+4E00-9FAF, U+FF00-FFEF;
}

html {
  --font-main: "SF Pro Display", "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
}

html[lang="jp"],
[lang="jp"] * {
  font-family: "SF Pro Display", "Inter", "HiraginoOnly", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
}

html[lang="cn"],
[lang="cn"] * {
  font-family: "SF Pro Display", "Inter", "PingFang SC", "Pretendard", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}

html[lang="tw"],
[lang="tw"] * {
  font-family: "SF Pro Display", "Inter", "PingFang HK", "PingFang TC", "Pretendard", "Microsoft JhengHei", "Noto Sans TC", sans-serif !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
  color: var(--text-primary);
  font-family: var(--font-main);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}

/* 
  Initial hide for i18n elements to prevent Flash of Unstyled Content (FOUC) 
*/
[data-i18n] {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

body.i18n-ready [data-i18n] {
  opacity: 1;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 70% 60% at 5% 10%, rgba(2, 120, 255, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 95% 5%, rgba(175, 82, 222, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(2, 118, 255, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(139, 92, 246, 0.12) 0%, transparent 55%);
  pointer-events: none;
}



/* Nav – Apple Liquid Glass */
nav {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1000px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
  padding: 12px 24px;
  border-radius: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  transition: var(--transition);
}

/* Liquid Glass specular highlight */
nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.15) 40%,
      transparent 100%);
  border-radius: 100px 100px 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Liquid Glass edge refraction */
nav::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 40%,
      transparent 60%,
      rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
  z-index: 0;
}

.nav-left {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-left:hover {
  opacity: 0.8;
}

.logo-ice {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-text {
  font-size: 1.15rem;
  /* Slightly smaller to fit full name beautifully */
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  white-space: nowrap;
}

.nav-right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-right a {
  text-decoration: none;
  color: #444;
  /* Slightly darker for better readability */
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
}

.nav-right a:hover {
  color: var(--text-primary);
}

.lang-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-menu-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  outline: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.icon-globe {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.icon-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: transform 0.3s ease;
}

.lang-menu-btn.active .icon-chevron {
  transform: rotate(180deg);
}

.lang-menu-btn:hover,
.lang-menu-btn:focus {
  background: var(--accent-light);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.lang-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 32px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  min-width: 140px;
  overflow: hidden;
  z-index: 1001;
  opacity: 1;
  transform: translateY(0);
  transition: var(--transition);
  visibility: visible;
}

.lang-popup.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  visibility: hidden;
}

.lang-option {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.lang-option:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent-blue);
}

.btn-alcove-style {
  background: #111;
  color: #FFFFFF !important;
  /* Ensure pure white text */
  padding: 8px 20px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-alcove-style span {
  color: #FFFFFF !important;
}

.btn-alcove-style:hover,
.btn-alcove-style:focus {
  transform: translateY(-2px);
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-light);
}

.btn-alcove-style svg {
  fill: #fff;
}

.btn-alcove-style:hover {
  transform: translateY(-2px) scale(1.02);
  background: #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  position: relative;
  z-index: 1;
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
}

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 160px 20px 120px;
  /* Reduced for better balance */
}

.hero-badge {
  background: rgba(245, 158, 11, 0.08);
  color: #D97706;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 32px;
  /* Pull it closer to title */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(245, 158, 11, 0.15);
  letter-spacing: -0.01em;
  backdrop-filter: blur(10px);
  transition: var(--transition);
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #F59E0B;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.status-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #F59E0B;
  animation: pulseRipple 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulseRipple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.highlight-liquid {
  background: linear-gradient(135deg, #0276FF 0%, #AF52DE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.highlight-relative {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.highlight-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 140%;
  z-index: 10;
  /* Bring above text for hand-drawn feel */
  fill: transparent;
  stroke: var(--accent-blue);
  stroke-width: 3px;
  stroke-linecap: round;
  pointer-events: none;
  stroke-opacity: 0.85;
  /* Slight transparency for overlay effect */
}

.highlight-svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

.active .highlight-svg path {
  animation: drawHighlight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes drawHighlight {
  to {
    stroke-dashoffset: 0;
  }
}

.hero p {
  font-size: 1.25rem;
  color: #6E6E73;
  max-width: 600px;
  margin-bottom: 32px;
  font-weight: 500;
  line-height: 1.4;
}

.hero-btns {
  display: flex;
  gap: 20px;
  margin-bottom: 60px;
}

.btn-primary-large {
  background: var(--btn-bg);
  color: #FFFFFF !important;
  padding: 18px 36px;
  border-radius: 100px;
  /* Fully rounded buttons */
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  transition: var(--transition);
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary-large:hover {
  background: #000;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.btn-primary-large:hover,
.btn-primary-large:focus {
  transform: translateY(-3px);
  outline: none;
  box-shadow: 0 0 0 6px var(--accent-light);
}

/* Purchase pill button */
.btn-purchase-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-darker, #E5EDF4);
  color: var(--text-primary, #1C1E21);
  padding: 18px 24px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  transition: var(--transition);
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.btn-purchase-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 6px var(--accent-light);
  filter: brightness(0.96);
}

.purchase-icon {
  color: var(--text-secondary, #5F6368);
  flex-shrink: 0;
}

.purchase-price-badge {
  background: var(--btn-bg, #1C1E21);
  color: var(--btn-text, #fff);
  font-size: 1rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  letter-spacing: -0.01em;
}


/* --- REAL BROWSER MOCKUP (Matching Screenshot) --- */
.mockup-frame {
  width: 95%;
  max-width: 1100px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: var(--transition);
}

/* Browser Chrome Elements */
.browser-chrome {
  background: #e7ebf1;
  /* Chromium top bar color */
  padding: 8px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chrome-tab-bar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.traffic-lights {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.red {
  background: #ff5f57;
}

.yellow {
  background: #ffbd2e;
}

.green {
  background: #28c940;
}

.chrome-tab {
  background: #fff;
  padding: 5px 20px;
  border-radius: 8px 8px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #444;
}

.chrome-address-bar {
  background: #fff;
  height: 32px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-size: 0.8rem;
  color: #666;
  width: 100%;
  margin-top: 5px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mockup Content Area (Clean White) */
.mockup-content {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
}

.mock-now-bar {
  position: absolute;
  top: 40px;
  background: rgba(28, 28, 30, 0.65);
  backdrop-filter: blur(40px) saturate(1.8) brightness(0.9);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(0.9);
  color: #fff;
  padding: 8px 24px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.island-bg-container {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}

.island-bg {
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 0deg,
      var(--glow-c1, transparent),
      var(--glow-c2, transparent),
      var(--glow-c1, transparent),
      var(--glow-c2, transparent),
      var(--glow-c1, transparent));
  animation: spinSmooth 6s linear infinite;
  filter: blur(28px);
  opacity: 0.7;
  transition: --glow-c1 3s ease, --glow-c2 3s ease;
}

@keyframes spinSmooth {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Now Bar Themes */
.mock-now-bar.theme-sunrise {
  --glow-c1: #FF9500;
  --glow-c2: #FFCC00;
}

.mock-now-bar.theme-morning {
  --glow-c1: #007AFF;
  --glow-c2: #5AC8FA;
}

.mock-now-bar.theme-noon {
  --glow-c1: #FF2D55;
  --glow-c2: #FF9500;
}

.mock-now-bar.theme-sunset {
  --glow-c1: #FF5E3A;
  --glow-c2: #FF2D55;
}

.mock-now-bar.theme-twilight {
  --glow-c1: #5856D6;
  --glow-c2: #AF52DE;
}

.mock-now-bar.theme-night {
  --glow-c1: #2C3E50;
  --glow-c2: #4CA1AF;
}

#now-bar-text {
  position: relative;
  z-index: 1;
}

.mock-now-bar::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1d1d1f;
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mock-now-bar::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #1d1d1f;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 100;
}

.mock-now-bar:hover::after,
.mock-now-bar:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* News Box Widget */
.mock-news-box {
  position: absolute;
  left: 30px;
  width: 260px;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  z-index: 5;
  border: 1px solid rgba(0, 0, 0, 0.02);
}



.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}

.news-header h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1d1d1f;
}

.refresh-icon {
  font-size: 0.9rem;
  color: #888;
  cursor: pointer;
  transition: transform 0.3s;
}

.refresh-icon:hover {
  transform: rotate(180deg);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow: hidden;
}

.news-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-title {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #999;
  font-weight: 600;
}

.news-footer {
  margin-top: 5px;
  font-size: 0.6rem;
  color: #bbb;
  border-top: 1px solid #f9f9f9;
  padding-top: 8px;
  text-align: right;
  font-weight: 500;
}

.center-display {
  text-align: center;
}

.mock-clock {
  font-size: 9rem;
  font-weight: 800;
  color: #333;
  line-height: 1;
  letter-spacing: -3px;
}

.mock-date {
  font-size: 1.8rem;
  color: #666;
  font-weight: 600;
  margin-top: 10px;
}

/* Right Widgets */
.mock-sidebar {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-65%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mock-widget {
  width: 110px;
  height: 110px;
  background: rgba(245, 245, 247, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.widget-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.widget-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #555;
  line-height: 1.2;
}

.widget-label small {
  font-weight: 800;
  font-size: 1.1rem;
  color: #1d1d1f;
  display: block;
  margin-top: 2px;
}

/* Bottom Dock */
.mock-dock {
  position: absolute;
  bottom: 40px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.02);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  padding: 12px 25px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dock-item {
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
  transition: var(--transition);
  cursor: pointer;
}

.dock-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.dock-item:hover {
  transform: translateY(-10px) scale(1.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.dock-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1d1d1f;
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dock-item[data-tooltip]::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #1d1d1f;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 100;
}

.dock-item:hover::after,
.dock-item:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dock-divider {
  width: 1px;
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 5px;
}



/* Features Section */
.features-section {
  padding: 120px 60px;
  background: transparent;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.feature-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
  border-radius: 40px;
  background: transparent;
  transition: var(--transition);
}

.feature-box:hover {
  background: var(--bg-darker);
  transform: translateY(-5px);
}

.feature-icon-wrapper {
  font-size: 3rem;
  margin-bottom: 25px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: var(--text-primary);
  color: #fff;
  transition: var(--transition);
}

.feature-box:hover .feature-icon-wrapper {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.feature-box h3 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.feature-box p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 1.15rem;
  font-weight: 500;
}

/* Footer Section */
footer {
  padding: 80px 20px;
  text-align: center;
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.footer-icon-box {
  width: 60px;
  height: 60px;
  background: transparent;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: var(--transition);
  text-decoration: none;
}

.footer-icon-box svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}

.footer-icon-box:hover {
  background: var(--bg-darker);
  color: var(--accent-blue);
  transform: translateY(-5px);
}

.footer-copy {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .mock-clock {
    font-size: 7rem;
  }

  .mock-date {
    font-size: 1.5rem;
  }

  .mock-news-box {
    left: 15px;
    width: 220px;
  }

  .mock-sidebar {
    right: 15px;
  }

  .mock-widget {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 768px) {
  nav {
    padding: 10px 16px;
    width: calc(100% - 32px);
    top: 16px;
  }

  .nav-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
    -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
    padding: 24px;
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.1),
      0 2px 8px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: var(--transition);
    border-radius: 24px;
    width: 100%;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.85);
  }

  .nav-right.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-btn {
    display: block;
  }

  .hero {
    padding: 100px 20px 60px;
    position: relative;
    text-align: center;
  }

  .hero h1 {
    font-size: 2.6rem;
    line-height: 1.15;
    margin-bottom: 20px;
  }

  .hero p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 500px;
  }

  .mockup-frame {
    width: 92%;
    max-width: 600px;
    margin: 0 auto;
  }

  .mockup-content {
    aspect-ratio: 4 / 3;
    max-height: 450px;
  }

  .mock-news-box,
  .mock-sidebar {
    display: none;
  }

  .mock-clock {
    font-size: 5rem;
    letter-spacing: -1px;
  }

  .mock-date {
    font-size: 1.2rem;
  }

  .mock-dock {
    bottom: 20px;
    padding: 8px 15px;
    gap: 8px;
    border-radius: 20px;
  }

  .dock-item {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .dock-item img {
    width: 18px;
    height: 18px;
  }

  .mock-now-bar {
    top: 15px;
    padding: 6px 14px;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
    padding: 0;
  }

  .hero p {
    font-size: 0.95rem;
    margin-bottom: 25px;
  }

  .hero-btns {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    gap: 12px;
  }

  .btn-primary-large,
  .btn-purchase-pill {
    padding: 14px 20px;
    font-size: 1.1rem;
  }

  .mockup-content {
    aspect-ratio: 4 / 5;
    max-height: 380px;
  }

  .mock-clock {
    font-size: 3.2rem;
  }

  .mock-date {
    font-size: 0.85rem;
  }

  .mock-now-bar {
    top: 12px;
    padding: 4px 12px;
    font-size: 0.7rem;
  }

  .mock-dock {
    bottom: 10px;
    gap: 5px;
    padding: 6px 12px;
  }

  .dock-item {
    width: 30px;
    height: 30px;
  }

  .chrome-tab {
    padding: 4px 8px;
    font-size: 0.6rem;
  }

  .dot {
    width: 9px;
    height: 9px;
  }
}