/* Custom styles to complement Tailwind */
html { font-size: 14px; }
@media (min-width: 768px)  { html { font-size: 15px; } }
@media (min-width: 1024px) { html { font-size: 16px; } }
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* Remove all shadows from images and tables site-wide */
img, table {
    box-shadow: none !important;
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, #00B8D4 0%, #2DD4BF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* UI Mockup Tile */
.stat-tile {
    background-color: #F8FAFC; 
    border: 1px solid #E2E8F0; /* border-slate-200 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
    text-align: center;
}


/* Hero section with background image */
.hero-bg {
    background-image: url('images/gakuchikapeople.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: none;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

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

/* Custom hero section slant */
.hero-slant {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: linear-gradient(135deg, #0c4a6e 0%, #0077B6 70%, #00B8D4 100%);
    transform: skewY(-5deg);
    transform-origin: top left;
}

/* Hero title coloring */
.hero-title { color: #ffffff; }
.accent { color: #0077B6; }

/* Lightweight utility classes to replace inline styles */
.bg-white { background: #ffffff; }
.bg-surface { background: #F8FAFC; }
.bg-foam { background: #fdf0f0; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.text-white { color: #ffffff; }
.overflow-auto { overflow-x: auto; }
.p-12 { padding: 12px; }
.items-center { align-items: center; }

/* .full-width-image-section img {
    width: 654px;    /*native width
    max-width: 100%;  /*shrink on small screens
    height: auto;
  } */
  
/* Semantic helpers (keeps Tailwind in HTML; adds named hooks) */
.section-title { letter-spacing: 0.01em; }
.section-subtitle { letter-spacing: 0.01em; }
.feature-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 24px; text-align: center; }
.stat-tile { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 16px; text-align: center; }
.cta-gradient-btn { background: linear-gradient(90deg, #06B6D4, #10B981); color: #ffffff; border-radius: 9999px; }
.cta-outline-btn { background: #ffffff; color: #0f172a; border-radius: 9999px; }