/*
Theme Name: Arisu Wholesale
Theme URI: https://www.arisuwholesale.com/
Author: Arisu Wholesale
Description: Official single-page theme for Arisu Wholesale.
Version: 1.0.0
Text Domain: arisu-wholesale
*/

:root {
  --navy: #07366f;
  --navy-deep: #04264f;
  --blue: #0c70b7;
  --sky: #61b7e4;
  --cream: #f3f7fa;
  --paper: #ffffff;
  --muted: #657377;
  --line: #dce5ec;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.site-header {
  align-items: center;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(7,54,111,.12);
  display: flex;
  height: 82px;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(24px,6vw,96px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}
.admin-bar .site-header { top: 32px; }
.brand { align-items: center; display: inline-flex; }
.brand-logo { height: 72px; object-fit: contain; width: 128px; }
.desktop-nav { display: flex; gap: 38px; margin-left: 60px; }
.desktop-nav a { font-size: 14px; font-weight: 700; position: relative; }
.desktop-nav a::after { background: var(--blue); bottom: -10px; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: .25s ease; width: 100%; }
.desktop-nav a:hover::after { transform: scaleX(1); }
.header-cta { align-items: center; border: 1px solid var(--navy); display: flex; font-size: 13px; font-weight: 700; gap: 14px; padding: 12px 17px; transition: .2s ease; }
.header-cta:hover { background: var(--navy); color: #fff; }
.arrow { font-size: 18px; line-height: 1; }

.hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(440px,.92fr);
  min-height: 790px;
  overflow: hidden;
  padding: 152px clamp(24px,6vw,96px) 82px;
  position: relative;
}
.hero::before { border: 1px solid rgba(7,54,111,.09); border-radius: 50%; content: ""; height: 560px; left: -310px; position: absolute; top: 180px; width: 560px; }
.hero-copy { align-self: center; padding-bottom: 22px; padding-right: clamp(30px,7vw,110px); position: relative; z-index: 2; }
.eyebrow { align-items: center; color: var(--blue); display: flex; font-size: 11px; font-weight: 800; gap: 10px; letter-spacing: .16em; margin: 0 0 26px; }
.eyebrow > i { background: currentColor; display: block; height: 1px; width: 25px; }
.hero h1 { font-size: clamp(45px,5.4vw,75px); font-weight: 800; letter-spacing: -.07em; line-height: 1.2; margin: 0; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-lead { color: #59666a; font-size: clamp(15px,1.25vw,18px); line-height: 1.9; margin: 31px 0 0; }
.hero-actions { align-items: center; display: flex; gap: 28px; margin-top: 38px; }
.button { align-items: center; display: inline-flex; font-size: 14px; font-weight: 800; gap: 30px; justify-content: center; padding: 16px 22px; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: white; }
.button-primary:hover { background: #075590; }
.text-link { border-bottom: 1px solid rgba(7,54,111,.35); font-size: 14px; font-weight: 800; padding-bottom: 5px; }
.hero-note { align-items: center; color: #667478; display: flex; font-size: 12px; gap: 9px; margin-top: 48px; }
.check-dot { align-items: center; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); display: inline-flex; font-size: 11px; height: 19px; justify-content: center; width: 19px; }
.hero-visual { min-height: 570px; position: relative; }
.hero-main-image { height: 100%; margin: 0; overflow: hidden; position: relative; }
.hero-main-image::after { background: linear-gradient(135deg,rgba(4,38,79,.05),rgba(4,38,79,.28)); content: ""; inset: 0; position: absolute; }
.hero-main-image img { height: 100%; object-fit: cover; }
.hero-side-card { background: white; bottom: 0; left: -112px; padding: 14px 18px 18px; position: absolute; width: 218px; z-index: 3; box-shadow: 0 18px 45px rgba(4,38,79,.18); }
.hero-side-card img { aspect-ratio: 1; object-fit: contain; }
.side-card-kicker { border-top: 1px solid var(--line); color: #667c90; display: block; font-size: 7px; font-weight: 800; letter-spacing: .12em; padding-top: 11px; text-align: center; }
.hero-floating-card { align-items: center; background: white; display: flex; gap: 14px; padding: 17px 20px; position: absolute; right: -18px; top: 38px; z-index: 3; box-shadow: 0 18px 45px rgba(4,38,79,.15); }
.floating-icon { align-items: center; background: #e1eff8; color: var(--blue); display: flex; font-size: 22px; height: 42px; justify-content: center; width: 42px; }
.hero-floating-card > span:last-child { display: flex; flex-direction: column; }
.hero-floating-card small { color: #8c9698; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.hero-floating-card strong { font-size: 13px; margin-top: 4px; }

.category-section { background: var(--paper); padding: 120px clamp(24px,6vw,96px) 132px; }
.section-heading { align-items: flex-end; display: grid; gap: 50px; grid-template-columns: 1.1fr .9fr; margin-bottom: 60px; }
.section-heading h2, .about-section h2, .contact-section h2 { font-size: clamp(34px,4vw,56px); font-weight: 800; letter-spacing: -.06em; line-height: 1.25; margin: 0; }
.section-heading > p { color: var(--muted); font-size: 15px; line-height: 1.85; margin: 0 0 4px; max-width: 500px; }
.category-grid { display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); }
.category-card { background: white; border: 1px solid #e4e8ec; transition: .25s ease; }
.category-card:hover { box-shadow: 0 20px 50px rgba(7,54,111,.1); transform: translateY(-6px); }
.category-image { height: 235px; overflow: hidden; position: relative; }
.category-image::after { background: linear-gradient(180deg,transparent 45%,rgba(4,38,79,.3)); content: ""; inset: 0; position: absolute; }
.category-image img { height: 100%; object-fit: cover; transition: transform .5s ease; }
.category-card:hover .category-image img { transform: scale(1.04); }
.category-icon { align-items: center; background: var(--blue); bottom: 0; color: white; display: flex; font-size: 22px; height: 49px; justify-content: center; position: absolute; right: 0; width: 49px; z-index: 2; }
.category-content { padding: 26px 25px 28px; }
.category-en { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.category-content h3 { font-size: 22px; letter-spacing: -.04em; margin: 8px 0 12px; }
.category-content p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 0; min-height: 68px; }
.category-content a { align-items: center; border-top: 1px solid #e9edf0; display: flex; font-size: 12px; font-weight: 800; gap: 7px; margin-top: 22px; padding-top: 17px; }

.about-section { background: linear-gradient(135deg,var(--navy-deep),var(--navy)); color: white; display: grid; gap: clamp(60px,9vw,140px); grid-template-columns: .92fr 1.08fr; padding: 125px clamp(24px,6vw,96px); position: relative; }
.about-section::before { border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; height: 430px; left: -190px; position: absolute; top: 140px; width: 430px; }
.eyebrow.light { color: var(--sky); }
.about-intro { position: relative; z-index: 1; }
.about-description { color: #b8c6c9; font-size: 14px; line-height: 1.9; margin: 27px 0 37px; max-width: 530px; }
.button-light { background: white; color: var(--navy); }
.strength-list { border-top: 1px solid rgba(255,255,255,.18); }
.strength-item { align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.18); display: grid; gap: 24px; grid-template-columns: 38px 52px 1fr; padding: 28px 0; }
.strength-number { color: #8ba0a6; font-size: 10px; font-weight: 800; padding-top: 7px; }
.strength-icon { align-items: center; border: 1px solid rgba(255,255,255,.25); color: var(--sky); display: flex; font-size: 23px; height: 48px; justify-content: center; width: 48px; }
.strength-item h3 { font-size: 19px; margin: 2px 0 8px; }
.strength-item p { color: #aebfc2; font-size: 13px; line-height: 1.7; margin: 0; }

.process-section { background: var(--cream); padding: 120px clamp(24px,6vw,96px) 130px; }
.process-list { border-bottom: 1px solid #cad7e1; border-top: 1px solid #cad7e1; display: grid; grid-template-columns: repeat(3,1fr); list-style: none; margin: 0; padding: 0; }
.process-list li { padding: 36px 38px 39px; position: relative; }
.process-list li + li { border-left: 1px solid #cad7e1; }
.process-list > li > span { color: var(--blue); font-size: 11px; font-weight: 800; position: absolute; right: 26px; top: 26px; }
.process-icon { align-items: center; background: #e1eff8; color: var(--blue); display: flex; font-size: 24px; height: 53px; justify-content: center; margin-bottom: 25px; width: 53px; }
.process-list h3 { font-size: 19px; margin: 0 0 8px; }
.process-list p { color: var(--muted); font-size: 13px; margin: 0; }

.contact-section { align-items: center; background: #e6f0f7; display: flex; flex-direction: column; overflow: hidden; padding: 110px 24px 90px; position: relative; text-align: center; }
.contact-section::before, .contact-section::after { border: 1px solid rgba(7,54,111,.1); border-radius: 50%; content: ""; height: 480px; position: absolute; width: 480px; }
.contact-section::before { left: -250px; top: -170px; }
.contact-section::after { bottom: -300px; right: -200px; }
.contact-badge { align-items: center; color: #788386; display: flex; font-size: 9px; font-weight: 800; gap: 7px; letter-spacing: .14em; margin-bottom: 28px; }
.contact-badge span { align-items: center; background: var(--navy); border-radius: 50%; color: white; display: flex; font-size: 8px; height: 38px; justify-content: center; letter-spacing: .06em; width: 38px; }
.eyebrow.centered { justify-content: center; margin-bottom: 20px; }
.contact-section > p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin: 21px 0 31px; }
.button.large { gap: 48px; padding: 18px 25px; position: relative; z-index: 2; }
.contact-meta { border-top: 1px solid rgba(7,54,111,.16); display: flex; gap: 28px; margin-top: 42px; padding-top: 21px; position: relative; z-index: 2; }
.contact-meta a, .contact-meta span { color: #657377; font-size: 11px; }

footer { align-items: center; background: var(--navy-deep); color: white; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 45px clamp(24px,6vw,96px); }
.footer-brand .brand-logo { background: white; height: 105px; padding: 4px; width: 105px; }
footer > p { color: #a9b9bc; font-size: 11px; margin: 0; text-align: center; }
.footer-contact { display: flex; flex-direction: column; gap: 7px; }
.footer-contact a { color: #dce9f1; }
footer .copyright { font-size: 8px; letter-spacing: .06em; text-align: right; }

@media (max-width:1050px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .category-image { height: 285px; }
  .hero-side-card { left: -60px; width: 180px; }
}
@media (max-width:780px) {
  .admin-bar .site-header { top: 46px; }
  .site-header { height: 72px; padding-inline: 20px; }
  .brand-logo { height: 62px; width: 106px; }
  .desktop-nav { display: none; }
  .header-cta { gap: 8px; padding: 10px 12px; }
  .hero { display: flex; flex-direction: column; min-height: auto; padding: 126px 20px 55px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(42px,12vw,58px); }
  .desktop-break { display: none; }
  .hero-visual { margin-top: 47px; min-height: 455px; }
  .hero-side-card { bottom: -1px; left: -1px; padding: 10px 12px 13px; width: 165px; }
  .hero-floating-card { right: -5px; top: 20px; }
  .category-section, .process-section { padding: 85px 20px; }
  .section-heading { align-items: flex-start; display: flex; flex-direction: column; gap: 25px; margin-bottom: 40px; }
  .section-heading h2, .about-section h2, .contact-section h2 { font-size: 36px; }
  .category-grid { grid-template-columns: 1fr; }
  .category-image { height: 260px; }
  .category-content p { min-height: 0; }
  .about-section { grid-template-columns: 1fr; padding: 88px 20px; }
  .process-list { grid-template-columns: 1fr; }
  .process-list li + li { border-left: 0; border-top: 1px solid #cad7e1; }
  .contact-section { padding: 90px 20px 75px; }
  .contact-meta { align-items: center; flex-direction: column; gap: 10px; }
  footer { gap: 24px; grid-template-columns: 1fr; justify-items: center; padding: 45px 20px; }
  footer .copyright { text-align: center; }
}
@media (max-width:420px) {
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-visual { min-height: 400px; }
  .hero-floating-card { padding: 12px; }
}