/* =========================================================
   Sellaphim Inc. — shared stylesheet
   Ethereal "Seraphim / feather" aesthetic
   ========================================================= */
:root{
  --bg:#F7F6FC;
  --bg-soft:#FCFBFF;
  --paper:#FFFFFF;
  --ink:#322E5C;
  --ink-soft:#5F5A8C;
  --ink-muted:#9A95C2;
  --violet:#8E76DE;
  --blue:#6E9CE8;
  --teal:#48BEB7;
  --grad:linear-gradient(120deg,#A78FE8 0%,#7FA6EA 52%,#5BC8C1 100%);
  --grad-text:linear-gradient(120deg,#8E76DE 0%,#6E9CE8 50%,#3FB6AF 100%);
  --grad-soft:linear-gradient(120deg,rgba(167,143,232,.16),rgba(91,200,193,.16));
  --glass:rgba(255,255,255,0.58);
  --glass-strong:rgba(255,255,255,0.80);
  --border:rgba(140,128,205,0.20);
  --border-soft:rgba(140,128,205,0.12);
  --shadow-sm:0 12px 34px rgba(116,104,188,0.10);
  --shadow:0 30px 70px rgba(116,104,188,0.16);
  --radius:24px;
  --radius-sm:15px;
  --maxw:1200px;
  --nav-h:74px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  font-weight:300;
  line-height:1.95;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* ambient feather wash behind every page (no negative-z pseudo) */
  background:
    radial-gradient(60% 50% at 84% 8%,rgba(167,143,232,.10),transparent 70%),
    radial-gradient(55% 55% at 10% 92%,rgba(91,200,193,.10),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,52px)}

/* ---------- shared type bits ---------- */
.eyebrow{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-style:italic;
  letter-spacing:0.02em;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.05;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.eyebrow-sub{
  font-family:'Outfit',sans-serif;font-size:0.74rem;letter-spacing:0.4em;
  color:var(--ink-muted);margin-top:0.55rem;text-transform:uppercase;font-weight:400;
}
.section-head{text-align:center;margin-bottom:clamp(2.6rem,5vw,4rem)}
.section-head .eyebrow-sub::before,
.section-head .eyebrow-sub::after{
  content:'';display:inline-block;width:34px;height:1px;vertical-align:middle;
  margin:0 0.9em;background:linear-gradient(90deg,transparent,var(--ink-muted));
}
.section-head .eyebrow-sub::after{background:linear-gradient(90deg,var(--ink-muted),transparent)}

.block{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}
section{position:relative}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:0.7rem;font-family:'Outfit',sans-serif;font-weight:400;
  font-size:0.95rem;letter-spacing:0.06em;padding:0.95rem 2rem;border-radius:100px;
  background:var(--grad);color:#fff;box-shadow:0 14px 32px rgba(126,110,210,.30);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;border:none;cursor:pointer;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(126,110,210,.42)}
.btn .a{transition:transform .35s}
.btn:hover .a{transform:translateX(5px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:0.7rem;font-family:'Outfit',sans-serif;
  font-size:0.92rem;letter-spacing:0.06em;padding:0.9rem 1.9rem;border-radius:100px;
  background:var(--glass-strong);color:var(--ink);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);transition:transform .35s,box-shadow .35s,color .35s;backdrop-filter:blur(8px);
}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--violet)}

/* ============ HEADER / NAV ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(252,251,255,0.74);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s,box-shadow .4s;
}
header.scrolled{border-bottom-color:var(--border-soft);box-shadow:0 6px 30px rgba(116,104,188,.07)}
.nav{
  max-width:var(--maxw);margin:0 auto;height:var(--nav-h);
  padding:0 clamp(22px,5vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center}
.brand .logo{height:42px;width:auto;display:block}
.nav-menu{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem)}
.nav-links{display:flex;gap:clamp(1.1rem,2.3vw,2.1rem);list-style:none}
.nav-links a{
  font-family:'Outfit',sans-serif;font-weight:300;font-size:0.92rem;
  letter-spacing:0.1em;color:var(--ink-soft);position:relative;padding:0.35rem 0;transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:1.5px;
  background:var(--grad);transition:width .35s;
}
.nav-links a:hover,.nav-links a.current{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.current::after{width:100%}
.lang{display:flex;align-items:center;gap:0.45rem;font-family:'Outfit',sans-serif;font-size:0.82rem;letter-spacing:0.08em}
.lang button{background:none;border:none;cursor:pointer;color:var(--ink-muted);font:inherit;padding:0.15rem 0.1rem;transition:color .3s}
.lang button.active{color:var(--violet);font-weight:500}
.lang .sep{color:var(--border)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* ============ FOOTER ============ */
.cta{
  text-align:center;padding:clamp(4.5rem,9vw,7rem) 0;position:relative;overflow:hidden;
  background:linear-gradient(rgba(247,246,252,.46),rgba(247,246,252,.68)),url('bg-contact.png');
  background-size:cover;background-position:center;
}
.cta h2{font-family:'Noto Serif JP',serif;font-weight:500;font-size:clamp(1.3rem,3vw,2rem);line-height:1.7;color:var(--ink);margin-bottom:2.2rem}

footer{background:linear-gradient(180deg,#EEECF8,#E7E4F4);border-top:1px solid var(--border);padding:clamp(3rem,5vw,4rem) 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:2.6rem;align-items:start}
.footer-brand{display:flex;align-items:center;margin-bottom:1.1rem}
.footer-brand .logo{height:56px;width:auto;display:block}
.footer-info{font-size:0.85rem;color:var(--ink-soft);line-height:2}
.footer-col h4{font-family:'Outfit',sans-serif;font-size:0.74rem;letter-spacing:0.24em;color:var(--ink-muted);margin-bottom:1.1rem;text-transform:uppercase;font-weight:500}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem}
.footer-col a{font-size:0.89rem;color:var(--ink-soft);transition:color .3s,padding-left .3s}
.footer-col a:hover{color:var(--violet);padding-left:4px}
.social{display:flex;gap:0.8rem;margin-top:0.3rem}
.social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass-strong);border:1px solid var(--border);color:var(--ink-soft);transition:.3s}
.social a:hover{color:var(--violet);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.social svg{width:18px;height:18px}
.copyright{text-align:center;margin-top:2.6rem;padding-top:1.7rem;border-top:1px solid var(--border);font-family:'Outfit',sans-serif;font-size:0.74rem;letter-spacing:0.12em;color:var(--ink-muted)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ RESPONSIVE (shared) ============ */
@media (max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand-col{grid-column:1/-1}
}
@media (max-width:760px){
  .nav-links,.lang{display:none}
  .nav-menu.open{position:absolute;top:var(--nav-h);left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem;
    background:rgba(252,251,255,.98);backdrop-filter:blur(18px);padding:1.6rem clamp(22px,5vw,52px);
    border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
  .nav-menu.open .nav-links{display:flex;flex-direction:column;gap:1.1rem}
  .nav-menu.open .lang{display:flex}
  .burger{display:flex}
}
@media (max-width:540px){
  .footer-grid{grid-template-columns:1fr}
}