/* /css/style.css */
:root{
  --bg:#f3f3f4;
  --surface:#ffffff;
  --surface-soft:#eef6fb;
  --text:#0c111b;
  --muted:#5c6776;
  --line:#dde7f0;
  --primary:#18bfd8;
  --primary-2:#139ae6;
  --primary-3:#1b54f2;
  --footer:#10b8d3;
  --radius:20px;
  --shadow:0 24px 64px rgba(16, 59, 110, .12);
  --max:1320px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  font-family:"Avenir Next","Futura","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
main{ display:block; }
.container{ width:min(var(--max), calc(100% - 36px)); margin:0 auto; }

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(243,243,244,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(221,231,240,.7);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:96px;
  gap:24px;
}
.brand{ display:inline-flex; align-items:center; }
.brand-logo{ height:54px; width:auto; }
.nav{
  display:flex;
  align-items:center;
  gap:22px;
}
.nav a{
  font-size:11px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text);
}
.nav a[aria-current="page"]{ color:var(--primary-2); }
.nav .nav-cta{
  min-width:84px;
  height:38px;
  padding:0 16px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 22px rgba(19,154,230,.22);
}
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:18px;
}
.mobile-nav{
  padding:0 28px 18px;
  background:rgba(243,243,244,.96);
}
.mobile-nav a{
  display:block;
  padding:10px 0;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}

.btn,
.pill-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:132px;
  height:40px;
  padding:0 18px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  color:#fff;
  box-shadow:0 14px 30px rgba(19,154,230,.22);
}
.btn-ghost{
  background:#fff;
  border-color:var(--line);
}
.pill-link{
  min-width:118px;
  height:34px;
  background:#fff;
  color:var(--primary-3);
  box-shadow:0 10px 22px rgba(255,255,255,.2);
}
.pill-link span{
  margin-left:8px;
  font-size:12px;
  line-height:1;
}
.pill-link.light{
  background:#fff;
  color:var(--primary-2);
  box-shadow:none;
}

.home-main{ padding-bottom:44px; }
[data-parallax]{
  transform:translate3d(0, calc(var(--parallax-offset, 0px) * 1px), 0);
  will-change:transform;
}
.section{ padding:70px 0; }

.hero-shell{ padding:28px 0 0; }
.hero-intro{
  padding:54px 0 18px;
  max-width:760px;
}
.eyebrow{
  margin:0 0 14px;
  font-size:11px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--primary-2);
}
h1{
  margin:0;
  font-size:62px;
  line-height:1.24;
  letter-spacing:-.03em;
  font-weight:600;
}
h2,h3{ margin:0; font-weight:500; letter-spacing:-.02em; }
p{ margin:0; }

.hero-stage{
  position:relative;
  min-height:520px;
  margin-top:18px;
  padding:74px 66px;
  border-radius:22px;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 11%, transparent 11% 29%, rgba(255,255,255,.08) 29% 47%, transparent 47% 62%, rgba(255,255,255,.08) 62% 78%, transparent 78% 100%),
    linear-gradient(135deg, #18c6db 0%, #109fe1 42%, #1b54f2 100%);
  box-shadow:var(--shadow);
}
.hero-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(500px 260px at 18% 0%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(420px 300px at 80% 14%, rgba(255,255,255,.12), transparent 70%);
}
.hero-stage-copy{
  position:relative;
  z-index:2;
  max-width:380px;
  padding-top:60px;
  color:#fff;
}
.hero-stage-label{
  font-size:54px;
  line-height:1;
  font-weight:300;
  letter-spacing:-.03em;
}
.hero-stage-title{
  margin-top:18px;
  font-size:24px;
  line-height:1.55;
  font-weight:500;
}
.hero-stage-text{
  margin-top:16px;
  font-size:12px;
  line-height:2;
  opacity:.95;
}
.hero-stage-copy .pill-link{ margin-top:24px; }

/* --- Hero SVG animation (data-flow network) --- */
.hero-svg-wrap{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  --sy:0px;
}
.hero-svg{
  display:block;
  width:100%;
  height:100%;
}
.svg-layer{ will-change:transform; }
.svg-layer-bg{  transform:translateY(calc(var(--sy) * -.05)); }
.svg-layer-mid{ transform:translateY(calc(var(--sy) * -.12)); }
.svg-layer-fg{  transform:translateY(calc(var(--sy) * -.22)); }
.glow-orb{
  transform-box:fill-box;
  transform-origin:center;
  animation:orb-float 9s ease-in-out infinite;
}
.glow-orb.orb-b{ animation-duration:12s; animation-delay:-4s; }
@keyframes orb-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-18px); }
}
.flow-path{
  fill:none;
  stroke:rgba(255,255,255,.24);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-dasharray:var(--path-len,900);
  stroke-dashoffset:var(--path-len,900);
  animation:path-draw 1.8s ease-out forwards;
}
.fp-1{ stroke-width:1.5; stroke:rgba(255,255,255,.4);  animation-delay:.05s; }
.fp-2{                                                  animation-delay:.35s; }
.fp-3{ stroke-width:1.4; stroke:rgba(255,255,255,.32); animation-delay:.65s; }
.fp-4{ stroke-width:.9;  stroke:rgba(255,255,255,.18); animation-delay:.95s; }
.fp-5{ stroke:rgba(255,255,255,.12); stroke-width:.8; stroke-dasharray:7 14; animation:none; }
@keyframes path-draw{ to{ stroke-dashoffset:0; } }
.node-ring{
  fill:rgba(255,255,255,.05);
  stroke:rgba(255,255,255,.2);
  stroke-width:.8;
}
.node-ring-2{
  transform-box:fill-box;
  transform-origin:center;
  animation:node-pulse 3.6s ease-in-out infinite;
  animation-delay:var(--nd,0s);
}
.node-ring-3{
  transform-box:fill-box;
  transform-origin:center;
  animation:node-pulse 4.4s ease-in-out infinite;
  animation-delay:var(--nd,0s);
}
@keyframes node-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.15); opacity:.4; }
}
.node-core{ fill:rgba(255,255,255,.16); stroke:none; }
.node-dot{  fill:rgba(255,255,255,.88); stroke:none; }
.particle{
  fill:rgba(255,255,255,.55);
  transform-box:fill-box;
  transform-origin:center;
  animation:particle-float 4.5s ease-in-out infinite;
  animation-delay:var(--pd,0s);
}
@keyframes particle-float{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(calc(var(--pa,10px) * -1)); opacity:.92; }
}
@media (prefers-reduced-motion:reduce){
  .flow-path{ animation:none; stroke-dashoffset:0; }
  .glow-orb,.node-ring-2,.node-ring-3,.particle{ animation:none; }
  .svg-layer{ transform:none !important; }
}

/* --- Scroll reveal --- */
[data-reveal]:not(.is-revealed){
  opacity:0;
  transform:translateY(22px);
}
[data-reveal]{
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:var(--rv,0s);
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]:not(.is-revealed){ transform:none; }
  [data-reveal]{ transition-duration:.25s; }
}

.whatwe{
  padding-top:62px;
  padding-bottom:28px;
  overflow:hidden; /* ghost-copy overflow clip */
}
.whatwe-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:42px;
  align-items:start;
}
.section-label{
  font-size:52px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:300;
  color:var(--primary-2);
  will-change:transform;
}
.section-label.white{ color:#fff; }
.section-note{
  margin-top:8px;
  font-size:10px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text);
}
.section-note.white{ color:rgba(255,255,255,.88); }
.whatwe-body{
  max-width:640px;
  padding-top:8px;
}
.whatwe-body p{
  font-size:26px;
  line-height:1.85;
  letter-spacing:-.02em;
}
.ghost-copy{
  margin-top:18px;
  font-size:102px;
  line-height:.96;
  letter-spacing:-.05em;
  white-space:nowrap;
  color:#fafbfd;
  will-change:transform;
}

.services-band{
  background:var(--surface-soft);
  padding-top:72px;
  padding-bottom:72px;
}
.services-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:42px;
  align-items:start;
}
.services-side{
  position:sticky;
  top:104px;
}
.services-side .pill-link{ margin-top:34px; }
.services-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.service-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  align-items:center;
}
.service-thumb{
  display:block;
  height:132px;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--primary), var(--primary-3));
}
.service-thumb-image{
  padding:6px;
  border:1px solid var(--line);
  background:#fff;
}
.service-thumb-link{
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-thumb-link:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(16,59,110,.08);
}
.service-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#fff;
}
.service-thumb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:8px;
  background:#fff;
}
.service-thumb-grid span{
  border-radius:4px;
  background:linear-gradient(135deg, rgba(24,191,216,.8), rgba(27,84,242,.22));
}
.service-thumb-icon{
  position:relative;
  background:linear-gradient(135deg, rgba(24,191,216,.9), rgba(27,84,242,.8));
}
.orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
}
.orbit-a{ inset:26px 38px; }
.orbit-b{ inset:44px 56px; }
.core{
  position:absolute;
  inset:52px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
}
.service-copy h3{
  font-size:34px;
  line-height:1.3;
}
.service-title-link{
  text-decoration:underline;
  text-decoration-color:rgba(19,154,230,.24);
  text-underline-offset:6px;
}
.service-copy p{
  margin-top:12px;
  font-size:16px;
  line-height:1.9;
  color:var(--muted);
}

.news-section{
  padding-top:78px;
  padding-bottom:78px;
  background:var(--bg);
}
.news-grid{
  display:grid;
  grid-template-columns:1fr 290px;
  gap:46px;
}
.news-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.news-item{
  display:grid;
  grid-template-columns:160px 1fr 28px;
  gap:22px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  transition:transform .16s ease, opacity .16s ease;
}
.news-item:hover{
  transform:translateX(4px);
}
.news-thumb{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:6px;
  height:82px;
  padding:12px 14px;
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(24,191,216,.95), rgba(27,84,242,.4)),
    linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.news-thumb .news-tag{
  margin:0;
  color:#fff;
}
.news-date{
  font-size:11px;
  line-height:1;
  color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums;
}
.archive-date{
  margin-top:4px;
  font-size:12px;
  line-height:1;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.news-copy p{
  font-size:15px;
  line-height:1.9;
}
.news-tag{
  margin-bottom:8px;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--primary-2);
}
.news-side{
  padding-top:8px;
}
.news-side .pill-link{ margin-top:30px; }
.pill-link-arrow{ min-width:138px; }
.news-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--primary-2);
  font-size:12px;
}

.career-section{
  padding-top:48px;
  padding-bottom:48px;
}
.career-panel{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:0;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(135deg, #18c4dc 0%, #129fe1 45%, #1d56f1 100%);
  box-shadow:var(--shadow);
}
.career-copy{
  padding:64px 54px;
  color:#fff;
}
.career-copy h2{
  margin-top:28px;
  font-size:46px;
  line-height:1.4;
  font-weight:500;
}
.career-copy p:not(.section-note):not(.section-label){
  margin-top:18px;
  font-size:15px;
  line-height:2;
  color:rgba(255,255,255,.92);
}
.career-copy .pill-link{ margin-top:28px; }
.career-mosaic{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:repeat(4, 1fr);
  gap:8px;
  min-height:520px;
  padding:8px;
  background:rgba(255,255,255,.08);
}
.mosaic{
  border-radius:2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    linear-gradient(135deg, #0f7fe0, #183fd9);
}
.mosaic.large,
.mosaic.tall{ grid-row:span 2; }
.mosaic.mid,
.mosaic.small{ grid-row:span 1; }

.action-section{
  padding-top:28px;
  padding-bottom:20px;
}
.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.action-card{
  position:relative;
  min-height:170px;
  padding:52px 44px;
  border-radius:6px;
  background:#fff;
  border:1px solid rgba(221,231,240,.8);
  transition:transform .16s ease, box-shadow .16s ease;
}
.action-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(16,59,110,.08);
}
.action-title{
  display:block;
  font-size:48px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:300;
  color:var(--primary-2);
}
.action-sub{
  display:block;
  margin-top:8px;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.action-arrow{
  position:absolute;
  top:42px;
  right:42px;
  font-size:28px;
  line-height:1;
  color:var(--primary-2);
}

.site-footer{
  margin-top:20px;
  padding:56px 0 18px;
  background:var(--footer);
  color:#fff;
  border-radius:22px 22px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
}
.footer-logo{
  height:28px;
  width:auto;
  filter:brightness(0) invert(1);
}
.footer-brand{
  margin-top:16px;
  font-size:18px;
  font-weight:600;
}
.footer-meta{
  margin-top:8px;
  font-size:13px;
  line-height:1.9;
  color:rgba(255,255,255,.9);
}
.footer-links{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  justify-items:start;
  align-content:start;
}
.footer-links a{
  font-size:24px;
  line-height:1;
  letter-spacing:-.03em;
  font-weight:300;
}
.footer-bottom{
  margin-top:36px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:11px;
  line-height:1.8;
  color:rgba(255,255,255,.9);
}

.news-archive{
  background:var(--bg);
}
.archive-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.archive-item{
  display:grid;
  grid-template-columns:1.15fr 1fr 28px;
  gap:24px;
  align-items:center;
  padding:28px 30px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 32px rgba(16,59,110,.05);
  transition:transform .16s ease;
}
.archive-item:hover{
  transform:translateY(-2px);
}
.archive-title{
  margin-top:8px;
  font-size:28px;
  line-height:1.45;
}
.archive-text{
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
}
.archive-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--primary-2);
}
.thanks-panel{
  text-align:left;
}
.thanks-text{
  margin-top:20px;
  max-width:720px;
  font-size:16px;
  line-height:2;
  color:var(--muted);
}
.thanks-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.page-hero{
  padding:76px 0 22px;
  background:linear-gradient(180deg, #ffffff, #f5f9fd);
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-size:48px;
  line-height:1.2;
}
.page-hero .muted{
  margin-top:10px;
}

.profile-grid,
.contact-grid,
.policy-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:32px;
  align-items:start;
}
.profile-side,
.contact-side,
.policy-side{
  position:sticky;
  top:124px;
}
.profile-lead,
.contact-copy,
.policy-summary{
  margin-top:20px;
  font-size:15px;
  line-height:2;
  color:var(--muted);
}
.contact-note{
  margin-top:16px;
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
}
.profile-card,
.contact-card,
.policy-card{
  min-width:0;
}
.inline-link{
  color:var(--primary-2);
  text-decoration:underline;
  text-underline-offset:4px;
}
.policy-meta{
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}
.policy-card h3{
  margin-top:22px;
  font-size:21px;
  line-height:1.5;
}

.muted{ color:var(--muted); }
.small{ font-size:13px; line-height:1.8; }
.card{
  padding:34px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 40px rgba(16, 59, 110, .06);
}

.dl{ margin:0; }
.dl-row{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:22px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.dl-row:last-child{ border-bottom:0; }
.dl dt{
  margin:0;
  font-size:13px;
  line-height:1.8;
  font-weight:700;
  color:var(--muted);
}
.dl dd{
  margin:0;
  font-size:15px;
  line-height:2;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}
label{ font-weight:700; font-size:14px; }
.req{ margin-left:8px; color:var(--primary-2); font-size:11px; }
input,textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  font:inherit;
  background:#fff;
  outline:none;
}
input:focus,textarea:focus{
  border-color:rgba(19,154,230,.6);
  box-shadow:0 0 0 4px rgba(19,154,230,.12);
}
.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.8;
  font-weight:500;
  color:var(--muted);
}
.check input{
  width:auto;
  margin-top:4px;
}
.form-error{
  display:none;
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid #ffd6d3;
  border-radius:12px;
  background:#ffefee;
  color:#b42318;
}
.form-error.is-visible{ display:block; }
.hidden{ display:none; }

.prose h2{
  margin-top:24px;
  font-size:28px;
}
.prose p{
  margin-top:10px;
  font-size:15px;
  line-height:2;
  color:var(--muted);
}
.prose a{
  color:var(--primary-2);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width: 920px){
  .container{ width:min(var(--max), calc(100% - 24px)); }
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .header-inner{ min-height:78px; }
  .brand-logo{ height:38px; }
  .hero-intro{ padding-top:28px; }
  h1{ font-size:40px; }
  .hero-stage{
    min-height:auto;
    padding:32px 22px 240px;
  }
  .hero-stage-copy{
    max-width:none;
    padding-top:0;
  }
  .hero-stage-label{ font-size:40px; }
  .hero-stage-title{ font-size:20px; }
  .whatwe-grid,
  .services-grid,
  .news-grid,
  .career-panel,
  .action-grid,
  .profile-grid,
  .contact-grid,
  .policy-grid,
  .footer-grid,
  .dl-row{
    grid-template-columns:1fr;
  }
  .whatwe-body p{ font-size:18px; }
  .ghost-copy{
    font-size:46px;
    margin-top:24px;
    white-space:normal;
    line-height:1.02;
  }
  .services-side{
    position:static;
  }
  .profile-side,
  .contact-side,
  .policy-side{
    position:static;
  }
  .section-label{ font-size:38px; }
  .service-row,
  .news-item,
  .archive-item{
    grid-template-columns:1fr;
  }
  .news-side{
    order:-1;
  }
  .service-copy h3{ font-size:24px; }
  .career-copy{
    padding:38px 24px;
  }
  .career-copy h2{ font-size:32px; }
  .career-mosaic{ min-height:280px; }
  .action-card{
    min-height:130px;
    padding:34px 24px;
  }
  .action-title{ font-size:36px; }
  .action-arrow{
    top:28px;
    right:24px;
  }
  .site-footer{
    border-radius:18px 18px 0 0;
    padding-top:38px;
  }
  .footer-links a{ font-size:24px; }
  .page-hero h1{ font-size:34px; }
}