/* =========================================================
   Asterindustry Corporate Site — style.css
   Design tokens & custom component styles
   (TailwindCSS Play CDN와 함께 사용, 무빌드 정적 사이트)
   ========================================================= */

:root{
  --primary:#0057D8;
  --secondary:#0B1F3A;
  --accent:#2AA7FF;
  --ink:#222222;
  --mist:#F7F8FA;
  --line:rgba(11,31,58,.08);
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  font-family:'Pretendard','Inter','Noto Sans KR',system-ui,sans-serif;
  color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.font-en{ font-family:'Inter','Pretendard',sans-serif; }
.tracking-eyebrow{ letter-spacing:.22em; }

/* ---------- Layout ---------- */
.container-x{ margin-inline:auto; max-width:1240px; padding-inline:24px; }
.section-pad{ padding-block:clamp(72px,9vw,120px); }

/* ---------- Header ---------- */
#site-header{ transition:all .3s ease; }
#site-header nav{ transition:background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nav-link{ position:relative; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition:width .3s ease; }
.nav-link:hover::after{ width:100%; }

/* ---------- Buttons ---------- */
.btn-primary{ background:var(--primary); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-primary:hover{ background:#0b62e6; transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,87,216,.6); }
.btn-ghost{ transition:background .2s ease, border-color .2s ease, color .2s ease; }

/* ---------- Hero ---------- */
.hero-bg{
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(42,167,255,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(0,87,216,.18), transparent 55%),
    linear-gradient(180deg,#0B1F3A 0%,#0A1B33 100%);
}
.grid-overlay{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 30%, #000 40%, transparent 78%);
          mask-image:radial-gradient(120% 120% at 50% 30%, #000 40%, transparent 78%);
}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:1.25rem;
  box-shadow:0 1px 2px rgba(11,31,58,.04), 0 12px 32px -16px rgba(11,31,58,.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px -24px rgba(0,87,216,.32); border-color:rgba(0,87,216,.25); }
.icon-badge{ display:grid; place-items:center; border-radius:.85rem; background:rgba(0,87,216,.09); color:var(--primary); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.d1{transition-delay:.05s}.d2{transition-delay:.13s}.d3{transition-delay:.21s}.d4{transition-delay:.29s}.d5{transition-delay:.37s}.d6{transition-delay:.45s}

/* ---------- Hero visual float ---------- */
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.floaty{ animation:floaty 6s ease-in-out infinite; }
.floaty.slow{ animation-duration:8s; }
@keyframes dash{ to{ stroke-dashoffset:-1000; } }
.flow{ stroke-dasharray:6 10; animation:dash 22s linear infinite; }

/* ---------- Timeline ---------- */
.tl-line{ background:linear-gradient(180deg, rgba(0,87,216,.35), rgba(42,167,255,.08)); }

/* ---------- Process arrow flow ---------- */
.flow-step{ position:relative; }
.flow-step:not(:last-child)::after{
  content:''; position:absolute; top:50%; right:-26px; width:22px; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
@media (max-width:768px){
  .flow-step:not(:last-child)::after{ display:none; }
}

/* ---------- Mobile menu ---------- */
#mobile-menu{ transition:opacity .3s ease, visibility .3s ease; }
#mobile-menu.hidden-menu{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- Accessibility ---------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}