/* =========================================================
   合同会社T-SYSTEMS  —  Corporate Site
   Dark / modern tech theme
   ========================================================= */

:root{
  --bg:        #0a0e1a;
  --bg-alt:    #0d1322;
  --surface:   #121a2e;
  --surface-2: #16203a;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --text:      #e7ecf5;
  --muted:     #93a0b8;
  --muted-2:   #6b7894;

  --accent:    #38bdf8;
  --accent-2:  #818cf8;
  --grad:      linear-gradient(120deg,#38bdf8 0%,#818cf8 100%);
  --grad-soft: linear-gradient(120deg,rgba(56,189,248,.16),rgba(129,140,248,.16));

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1140px;
  --ease:      cubic-bezier(.22,.61,.36,1);

  --ff-jp: "Noto Sans JP", system-ui, sans-serif;
  --ff-en: "Inter", var(--ff-jp);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-jp);
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--muted-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 28px; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:.02em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  will-change:transform;
}
.btn--primary{ background:var(--grad); color:#05121f; box-shadow:0 8px 28px -8px rgba(56,189,248,.6); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 14px 36px -8px rgba(56,189,248,.75); }
.btn--ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); transform:translateY(-3px); border-color:var(--accent); }
.btn--block{ width:100%; padding-block:16px; }

/* =========================================================
   Header
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:rgba(10,14,26,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }

.logo{ display:flex; align-items:center; gap:10px; }
.logo__mark{ display:grid; place-items:center; }
.logo__text{
  font-family:var(--ff-en); font-weight:800; font-size:1.15rem;
  letter-spacing:.08em; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav{ display:flex; align-items:center; gap:30px; }
.nav__link{
  position:relative; font-size:.92rem; font-weight:500; color:var(--muted);
  transition:color .25s; padding-block:6px;
}
.nav__link:hover{ color:var(--text); }
.nav__link:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--grad); transition:width .3s var(--ease);
}
.nav__link:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{
  padding:9px 20px; border-radius:999px; color:var(--text);
  border:1px solid var(--line-2);
}
.nav__cta:hover{ background:var(--grad); color:#05121f; border-color:transparent; }

.nav-toggle{ display:none; width:44px; height:44px; position:relative; }
.nav-toggle span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
.nav-toggle.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__grid{
  position:absolute; inset:-2px;
  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:54px 54px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%);
}
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.hero__glow--1{ width:520px; height:520px; background:rgba(56,189,248,.4); top:-120px; right:-80px; animation:float1 14s ease-in-out infinite; }
.hero__glow--2{ width:460px; height:460px; background:rgba(129,140,248,.38); bottom:-140px; left:-90px; animation:float2 18s ease-in-out infinite; }
@keyframes float1{ 50%{ transform:translate(-40px,40px) scale(1.08); } }
@keyframes float2{ 50%{ transform:translate(50px,-30px) scale(1.05); } }

.hero__inner{ position:relative; z-index:1; padding-top:120px; padding-bottom:90px; }
.hero__eyebrow{
  font-family:var(--ff-en); font-size:.78rem; font-weight:600; letter-spacing:.28em;
  color:var(--accent); margin-bottom:22px;
}
.hero__title{
  font-size:clamp(2.1rem,6vw,4rem); font-weight:900; line-height:1.25;
  letter-spacing:.01em; margin-bottom:26px;
}
.hero__lead{ font-size:clamp(.95rem,1.6vw,1.1rem); color:var(--muted); max-width:680px; margin-bottom:40px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; }

.hero__scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:1;
  width:26px; height:42px; border:2px solid var(--line-2); border-radius:14px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px;
  background:var(--accent); transform:translateX(-50%); animation:scroll 1.8s ease infinite;
}
@keyframes scroll{ 0%{opacity:0;transform:translate(-50%,0);} 30%{opacity:1;} 60%{opacity:1;transform:translate(-50%,14px);} 100%{opacity:0;transform:translate(-50%,14px);} }

/* =========================================================
   Section base
   ========================================================= */
.section{ padding-block:clamp(72px,11vw,128px); position:relative; }
.section--alt{ background:var(--bg-alt); }
.section--alt::before, .section--alt::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--line);
}
.section--alt::before{ top:0; } .section--alt::after{ bottom:0; }

.section__head{ text-align:center; max-width:720px; margin:0 auto clamp(48px,7vw,72px); }
.section__label{
  font-family:var(--ff-en); font-size:.78rem; font-weight:700; letter-spacing:.26em;
  color:var(--accent); display:inline-block; margin-bottom:14px;
}
.section__title{ font-size:clamp(1.7rem,4vw,2.5rem); font-weight:900; line-height:1.3; margin-bottom:18px; }
.section__desc{ color:var(--muted); font-size:1rem; }

/* =========================================================
   About
   ========================================================= */
.about__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:start; }
.about__table{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 30px; overflow:hidden;
}
.about__row{ display:grid; grid-template-columns:128px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.about__row:last-child{ border-bottom:none; }
.about__row dt{ font-weight:700; color:var(--accent); font-size:.92rem; }
.about__row dd{ color:var(--text); }

.about__stats{ display:grid; gap:18px; }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; position:relative; overflow:hidden;
}
.stat::before{ content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:0; transition:opacity .3s; }
.stat:hover::before{ opacity:1; }
.stat__num{ font-family:var(--ff-en); font-size:2.6rem; font-weight:800; line-height:1; display:block; }
.stat__label{ display:flex; flex-direction:column; color:var(--muted); margin-top:8px; font-weight:600; position:relative; }
.stat__label small{ color:var(--muted-2); font-weight:400; font-size:.78rem; margin-top:2px; }

/* =========================================================
   Services — cards
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(0,0,0,.7); }
.card:hover::after{ opacity:1; }
.card__icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--accent); margin-bottom:22px;
}
.card__title{ font-size:1.18rem; font-weight:700; margin-bottom:12px; }
.card__text{ color:var(--muted); font-size:.94rem; }

/* =========================================================
   Strengths
   ========================================================= */
.strengths{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.strength{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 32px; position:relative;
  transition:transform .35s var(--ease), background .35s;
}
.strength:hover{ transform:translateY(-6px); background:var(--surface-2); }
.strength__no{
  font-family:var(--ff-en); font-size:3rem; font-weight:800; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.85; display:block; margin-bottom:18px;
}
.strength__title{ font-size:1.22rem; font-weight:700; margin-bottom:14px; }
.strength__text{ color:var(--muted); font-size:.94rem; }

/* =========================================================
   Recruit
   ========================================================= */
.recruit{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.recruit__card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 34px; transition:transform .35s var(--ease), border-color .35s;
}
.recruit__card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.recruit__title{ font-size:1.35rem; font-weight:800; margin-bottom:14px; }
.recruit__title::before{ content:""; display:inline-block; width:26px; height:3px; border-radius:2px; background:var(--grad); vertical-align:middle; margin-right:12px; }
.recruit__text{ color:var(--muted); margin-bottom:22px; }
.recruit__list{ display:grid; gap:12px; }
.recruit__list li{ position:relative; padding-left:26px; color:var(--text); font-size:.94rem; }
.recruit__list li::before{
  content:""; position:absolute; left:0; top:.7em; width:8px; height:8px; border-radius:50%;
  background:var(--grad);
}
.recruit__note{ text-align:center; margin-top:40px; color:var(--muted); }
.recruit__note a{ color:var(--accent); font-weight:600; border-bottom:1px solid currentColor; }

/* =========================================================
   Contact
   ========================================================= */
.contact{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start; }
.contact__form{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.85rem; font-weight:600; color:var(--muted); }
.req{ font-size:.68rem; color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
.field input,.field textarea,.field select{
  width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:13px 15px; color:var(--text); font-size:.95rem; transition:border-color .25s, box-shadow .25s;
}
.field textarea{ resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,189,248,.18);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.78rem; color:var(--muted-2); margin-top:10px; }
.form-msg{ font-size:.9rem; margin-top:10px; min-height:1.2em; }
.form-msg.is-error{ color:#fca5a5; }
.form-msg.is-ok{ color:#6ee7b7; }

.contact__info{
  background:var(--grad-soft); border:1px solid var(--line); border-radius:var(--radius); padding:36px;
}
.contact__info h3{ font-size:1.25rem; font-weight:800; margin-bottom:22px; }
.contact__dl{ display:grid; gap:16px; margin-bottom:26px; }
.contact__dl > div{ display:grid; grid-template-columns:88px 1fr; gap:12px; }
.contact__dl dt{ font-weight:700; color:var(--accent); font-size:.88rem; }
.contact__dl dd{ font-size:.92rem; }
.contact__lead{ color:var(--muted); font-size:.92rem; border-top:1px solid var(--line); padding-top:22px; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--bg-alt); border-top:1px solid var(--line); }
.footer__inner{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-block:54px; }
.footer__brand .logo__text{ font-size:1.3rem; }
.footer__brand p{ color:var(--muted); margin-top:12px; font-size:.92rem; max-width:340px; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:24px; align-content:start; }
.footer__nav a{ color:var(--muted); font-size:.9rem; transition:color .25s; }
.footer__nav a:hover{ color:var(--accent); }
.footer__copy{ border-top:1px solid var(--line); padding-block:22px; }
.footer__copy small{ color:var(--muted-2); font-family:var(--ff-en); letter-spacing:.02em; }

/* =========================================================
   Tech stack
   ========================================================= */
.tech{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tech-cat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; transition:transform .35s var(--ease), border-color .35s;
}
.tech-cat:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.tech-cat__title{
  font-size:1rem; font-weight:700; margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px solid var(--line); color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.tech-cat__title::before{
  content:""; width:8px; height:8px; border-radius:2px; background:var(--grad);
}
.tech-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tech-list li{
  font-family:var(--ff-en); font-size:.82rem; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; line-height:1.4;
  transition:border-color .2s, color .2s, background .2s;
}
.tech-list li:hover{ border-color:var(--accent); color:var(--accent); background:rgba(56,189,248,.06); }
.tech__note{ margin-top:32px; text-align:center; font-size:.88rem; color:var(--muted); }

/* =========================================================
   Pricing
   ========================================================= */
.pricing{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.price-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 26px; position:relative; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s;
}
.price-card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.price-card--featured{ background:var(--surface-2); box-shadow:0 22px 54px -28px rgba(56,189,248,.6); }
.price-card--featured::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.price-card__badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#05121f; font-size:.74rem; font-weight:700;
  padding:5px 16px; border-radius:999px; white-space:nowrap;
}
.price-card__name{ font-size:1.1rem; font-weight:700; margin-bottom:14px; }
.price-card__price{ display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; margin-bottom:6px; }
.price-card__num{ font-family:var(--ff-en); font-size:2rem; font-weight:800; line-height:1; }
.price-card__unit{ font-size:.86rem; color:var(--muted); font-weight:600; }
.price-card__note{ font-size:.8rem; color:var(--muted-2); margin-bottom:20px; }
.price-card__tiers{ display:grid; gap:7px; margin:4px 0 14px; padding:12px 14px; background:rgba(255,255,255,.04); border-radius:var(--radius-sm); }
.price-card__tiers li{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:.82rem; color:var(--muted); }
.price-card__tiers b{ color:var(--text); font-weight:700; white-space:nowrap; }
.price-card__list{ display:grid; gap:10px; margin-bottom:22px; }
.price-card__list li{ position:relative; padding-left:24px; font-size:.9rem; }
.price-card__list li::before{
  content:""; position:absolute; left:3px; top:.3em; width:6px; height:11px;
  border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.price-card__target{ margin-top:auto; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; }

.pricing__pay{
  margin-top:36px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 28px;
}
.pricing__pay p{ font-size:.92rem; }
.pricing__pay p + p{ margin-top:8px; font-size:.84rem; }
.pricing__cta{ text-align:center; margin-top:36px; }

/* =========================================================
   Flow
   ========================================================= */
.flow{ max-width:760px; margin-inline:auto; }
.flow__step{ display:grid; grid-template-columns:56px 1fr; gap:24px; padding-bottom:34px; position:relative; }
.flow__step:last-child{ padding-bottom:0; }
.flow__step::before{
  content:""; position:absolute; left:27px; top:56px; bottom:-4px; width:2px;
  background:linear-gradient(var(--accent), rgba(129,140,248,.15)); opacity:.45;
}
.flow__step:last-child::before{ display:none; }
.flow__no{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--ff-en); font-weight:800; font-size:1.05rem; color:#05121f;
  background:var(--grad); position:relative; z-index:1;
}
.flow__body{ padding-top:7px; }
.flow__body h3{ font-size:1.15rem; font-weight:700; margin-bottom:8px; }
.flow__body p{ color:var(--muted); font-size:.94rem; }

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .nav{ gap:18px; }
  .nav__link{ font-size:.86rem; }
}

@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .pricing{ grid-template-columns:repeat(2,1fr); }
  .tech{ grid-template-columns:repeat(2,1fr); }
  .strengths{ grid-template-columns:1fr; }
  .recruit{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact__form{ order:2; }
}

@media (max-width:760px){
  .nav{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(10,14,26,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .3s, transform .3s, visibility .3s; padding:8px 24px 24px;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; visibility:visible; }
  .nav__link{ padding:16px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__link:not(.nav__cta)::after{ display:none; }
  .nav__cta{ margin-top:16px; text-align:center; padding-block:14px; }
  .nav-toggle{ display:block; }
}

@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .pricing{ grid-template-columns:1fr; }
  .tech{ grid-template-columns:1fr; }
  .contact__form{ grid-template-columns:1fr; padding:26px; }
  .about__row{ grid-template-columns:96px 1fr; gap:12px; }
  .container{ padding-inline:20px; }
}