/* ============================================================
   InkSeed 墨籽创意 — 官网样式
   品牌：墨黄 / 墨黑 / 米纸，手绘叙画 + 干净排版
   ============================================================ */

:root{
  --yellow:      #F6C445;   /* 品牌主黄 */
  --yellow-deep: #E7A82F;
  --yellow-lite: #FFE289;
  --ink:         #1B1712;   /* 墨黑 */
  --ink-soft:    #3A342C;
  --paper:       #FBF6EA;   /* 米纸页底 */
  --paper-2:     #F4EAD5;
  --cream:       #F2E7CE;   /* 插画米色 */
  --line:        rgba(27,23,18,.14);

  --coral:  #F0623A;
  --teal:   #2FA9BC;
  --purple: #7A5BA6;
  --blue:   #2A4BA0;
  --pink:   #E15B99;
  --green:  #6DA35A;

  --maxw: 1200px;
  --r:   18px;
  --r-lg:26px;
  --shadow-sm: 0 2px 10px rgba(27,23,18,.08);
  --shadow:    0 14px 40px -14px rgba(27,23,18,.28);
  --shadow-lg: 0 30px 70px -24px rgba(27,23,18,.42);

  --f-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-hand: "Ma Shan Zheng", var(--f-sans);
  --f-scrawl: "Caveat", cursive;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--f-sans);color:var(--ink);
  background:var(--paper);line-height:1.75;font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--yellow);color:var(--ink);}

/* 纸纹噪点叠层 */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:110px 0;position:relative;}
.section--tight{padding:76px 0;}

/* ---------- 通用标题 ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-scrawl);font-size:1.5rem;color:var(--yellow-deep);
  letter-spacing:.5px;margin:0 0 10px;line-height:1;
}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;}
.h-sect{
  font-size:clamp(2rem,4.6vw,3.15rem);font-weight:900;line-height:1.12;
  margin:0 0 18px;letter-spacing:-.5px;
}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:46ch;margin:0;}
.center{text-align:center;}
.center .lead{margin-inline:auto;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-weight:700;font-size:1rem;padding:14px 26px;border-radius:999px;
  border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}
.btn--yellow{background:var(--yellow);border-color:var(--ink);color:var(--ink);}
.btn .arw{transition:transform .18s ease;}
.btn:hover .arw{transform:translateX(4px);}

/* ============================================================
   导航
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:20px 0;
}
.nav.scrolled{background:rgba(251,246,234,.86);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);padding:12px 0;}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand__mark{
  width:42px;height:42px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm);
}
.brand__mark img{width:30px;height:auto;filter:invert(1);}
.brand__name{font-weight:900;font-size:1.16rem;letter-spacing:.3px;line-height:1;}
.brand__name small{display:block;font-family:var(--f-scrawl);font-weight:600;
  font-size:.92rem;color:var(--yellow-deep);letter-spacing:.4px;margin-top:2px;}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{font-weight:500;font-size:1rem;position:relative;color:var(--ink-soft);transition:color .2s;}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--yellow-deep);transition:right .25s ease;border-radius:2px;}
.nav__links a:hover{color:var(--ink);}
.nav__links a:hover::after{right:0;}
.nav__cta{margin-left:6px;}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.nav__toggle span{display:block;width:26px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:3px;transition:.3s;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;background:var(--yellow);overflow:hidden;
  padding:150px 0 130px;
}
.hero::after{ /* 底部柔和过渡到纸底 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--paper));
}
.hero__inner{position:relative;z-index:3;max-width:900px;margin:0 auto;text-align:center;}
.hero__eyebrow{
  font-family:var(--f-hand);font-size:1.5rem;color:var(--ink);opacity:.82;margin:0 0 14px;letter-spacing:2px;
}
.hero__logo{width:min(280px,52%);margin:0 auto 20px;filter:drop-shadow(0 10px 24px rgba(27,23,18,.18));}
.hero__tagline{
  font-family:var(--f-hand);font-size:clamp(2.2rem,6vw,3.6rem);
  color:var(--ink);margin:6px 0 20px;line-height:1.1;
}
.hero__sub{
  font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-soft);font-weight:500;
  max-width:40ch;margin:0 auto 12px;
}
.hero__en{font-family:var(--f-scrawl);font-size:1.4rem;color:var(--yellow-deep);margin:0 0 30px;}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* 漂浮插画角色 */
.mascot{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(0 12px 18px rgba(27,23,18,.14));
  animation:float 7s ease-in-out infinite;}
.mascot--globe {width:170px;left:2%;top:20%;animation-delay:0s;}
.mascot--puzzle{width:230px;right:1%;top:14%;animation-delay:.8s;}
.mascot--screen{width:180px;right:5%;bottom:9%;animation-delay:1.6s;}
.mascot--brush {width:120px;left:6%;bottom:8%;animation-delay:1.1s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-16px) rotate(1.5deg);}}

/* 星芒装饰 */
.spark{position:absolute;z-index:2;color:var(--coral);opacity:.9;animation:pop 4s ease-in-out infinite;}
@keyframes pop{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.18) rotate(10deg);}}

/* ---------- 客户滚动条 ---------- */
.marquee{background:var(--ink);color:var(--paper);padding:20px 0;overflow:hidden;
  border-top:3px solid var(--ink);}
.marquee__track{display:flex;gap:56px;white-space:nowrap;width:max-content;
  animation:scroll 34s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__track span{font-weight:700;font-size:1.18rem;letter-spacing:.5px;opacity:.86;
  display:inline-flex;align-items:center;gap:56px;}
.marquee__track span::after{content:"✳";color:var(--yellow);font-size:.9rem;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ============================================================
   关于 / 理念
   ============================================================ */
.about{background:var(--paper);}
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.about__manifesto p{font-size:1.16rem;color:var(--ink-soft);margin:0 0 18px;}
.about__manifesto strong{color:var(--ink);font-weight:700;
  background:linear-gradient(transparent 62%, var(--yellow-lite) 62%);}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--yellow);}
.stat__num{font-size:2.5rem;font-weight:900;line-height:1;letter-spacing:-1px;}
.stat__num small{font-size:1.2rem;}
.stat__label{margin-top:8px;color:var(--ink-soft);font-size:.98rem;font-weight:500;}
.stat:nth-child(2)::before{background:var(--coral);}
.stat:nth-child(3)::before{background:var(--teal);}
.stat:nth-child(4)::before{background:var(--purple);}

/* ============================================================
   服务
   ============================================================ */
.services{background:linear-gradient(180deg,var(--paper),var(--paper-2));}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:52px;}
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;position:relative;
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.svc__media{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--cream);}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.svc:hover .svc__media img{transform:scale(1.06);}
.svc__no{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--f-scrawl);
  font-size:2rem;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.svc__body{padding:26px 28px 30px;}
.svc__tag{display:inline-block;font-family:var(--f-scrawl);font-size:1.15rem;margin-bottom:4px;}
.svc__title{font-size:1.5rem;font-weight:900;margin:0 0 10px;}
.svc__desc{color:var(--ink-soft);font-size:1rem;margin:0;}
.svc__scenes{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.svc__scenes li{font-size:.82rem;font-weight:600;padding:5px 12px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);}
.svc--1{--ac:var(--yellow-deep);}
.svc--2{--ac:var(--coral);}
.svc--3{--ac:var(--green);}
.svc--4{--ac:var(--blue);}
.svc__tag,.svc__title{color:var(--ink);}
.svc__tag{color:var(--ac);}
.svc__body{border-top:4px solid var(--ac);}

/* ============================================================
   作品 / 案例
   ============================================================ */
.work{background:var(--paper-2);}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:44px 0 40px;}
.filter{font-family:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
  padding:9px 20px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;
  color:var(--ink);transition:.2s;}
.filter:hover{background:var(--yellow-lite);}
.filter.active{background:var(--ink);color:var(--paper);}

.gallery{columns:3;column-gap:20px;}
.card{
  break-inside:avoid;margin-bottom:20px;border-radius:var(--r);overflow:hidden;position:relative;
  cursor:pointer;box-shadow:var(--shadow-sm);background:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card img{width:100%;height:auto;transition:transform .5s ease, opacity .3s;}
.card:hover img{transform:scale(1.05);opacity:.9;}
.card__cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(15,12,9,.9),transparent);
  transform:translateY(8px);opacity:0;transition:.28s ease;
}
.card:hover .card__cap{transform:none;opacity:1;}
.card__client{font-family:var(--f-scrawl);font-size:1.1rem;color:var(--yellow);line-height:1;}
.card__title{font-weight:700;font-size:1.05rem;margin-top:2px;}
.card__chip{position:absolute;top:12px;right:12px;font-size:.72rem;font-weight:700;
  padding:4px 10px;border-radius:999px;background:rgba(251,246,234,.92);color:var(--ink);
  opacity:0;transform:translateY(-6px);transition:.28s ease;}
.card:hover .card__chip{opacity:1;transform:none;}
.is-hidden{display:none;}

/* ============================================================
   精选暗场 band（签名叙画）
   ============================================================ */
.feature{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;}
.feature .kicker{color:var(--yellow);}
.feature .h-sect{color:var(--paper);}
.feature__lead{color:rgba(251,246,234,.72);max-width:52ch;font-size:1.1rem;}
.feature__stage{margin-top:52px;display:grid;grid-template-columns:1.4fr 1fr;gap:22px;}
.feature__big{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;}
.feature__big img{width:100%;height:100%;object-fit:cover;}
.feature__side{display:grid;grid-template-rows:1fr 1fr;gap:22px;}
.feature__side figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.feature__side img{width:100%;height:100%;object-fit:cover;}
.feature figcaption,.feature__big figcaption{
  position:absolute;left:18px;bottom:16px;font-family:var(--f-scrawl);font-size:1.2rem;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.feature__big{position:relative;}

/* ============================================================
   客户
   ============================================================ */
.clients{background:var(--paper);}
.clients__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);margin-top:44px;}
.clients__card img{border-radius:12px;width:100%;}
.clients__names{margin:34px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  gap:10px 12px;justify-content:center;}
.clients__names li{font-weight:600;font-size:.95rem;color:var(--ink-soft);
  padding:7px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);}

/* ============================================================
   主创团队
   ============================================================ */
.team{background:linear-gradient(180deg,var(--paper),var(--paper-2));}
.team__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.team__photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);position:relative;}
.team__photo img{width:100%;}
.team__photo::after{content:"菜菜 & 文静";position:absolute;bottom:0;left:0;right:0;
  padding:30px 18px 14px;color:#fff;font-family:var(--f-scrawl);font-size:1.35rem;
  background:linear-gradient(to top,rgba(15,12,9,.8),transparent);}
.team__roles{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.team__roles li{font-size:.85rem;font-weight:700;padding:6px 13px;border-radius:999px;
  background:var(--yellow-lite);border:1px solid var(--yellow-deep);}
.team p{font-size:1.1rem;color:var(--ink-soft);margin:0 0 16px;}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.founder{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-sm);}
.founder h4{margin:0 0 3px;font-size:1.2rem;}
.founder span{color:var(--yellow-deep);font-weight:600;font-size:.92rem;}
.founder a{display:block;color:var(--ink-soft);font-size:.94rem;margin-top:8px;}
.founder a:hover{color:var(--ink);}

/* ============================================================
   联系
   ============================================================ */
.contact{background:var(--yellow);position:relative;overflow:hidden;}
.contact .h-sect{font-size:clamp(2.2rem,5vw,3.6rem);}
.contact__inner{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto;}
.contact__hand{font-family:var(--f-hand);font-size:clamp(1.4rem,3vw,2rem);margin:0 0 10px;}
.contact__methods{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.contact__methods a{background:var(--ink);color:var(--paper);padding:15px 26px;border-radius:999px;
  font-weight:700;transition:transform .18s, box-shadow .18s;box-shadow:var(--shadow-sm);}
.contact__methods a:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.contact__methods a small{display:block;font-weight:500;opacity:.7;font-size:.76rem;}
.contact .mascot--puzzle{width:200px;right:-30px;bottom:-20px;opacity:.9;animation:none;}

/* ============================================================
   页脚
   ============================================================ */
.footer{background:var(--ink);color:rgba(251,246,234,.7);padding:56px 0 34px;}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;}
.footer .brand__name{color:var(--paper);}
.footer__tag{font-family:var(--f-scrawl);font-size:1.3rem;color:var(--yellow);margin-top:8px;}
.footer__links{display:flex;gap:26px;flex-wrap:wrap;}
.footer__links a:hover{color:var(--yellow);}
.footer__bottom{margin-top:36px;padding-top:22px;border-top:1px solid rgba(251,246,234,.14);
  font-size:.85rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ============================================================
   Lightbox
   ============================================================ */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(15,12,9,.94);
  display:flex;align-items:center;justify-content:center;padding:34px;
  opacity:0;visibility:hidden;transition:opacity .3s;}
.lb.open{opacity:1;visibility:visible;}
.lb img{max-width:92vw;max-height:82vh;border-radius:12px;box-shadow:var(--shadow-lg);}
.lb__cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;}
.lb__cap b{font-size:1.1rem;}
.lb__cap span{display:block;font-family:var(--f-scrawl);color:var(--yellow);font-size:1.2rem;}
.lb__close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:1.5rem;cursor:pointer;
  transition:.2s;}
.lb__close:hover{background:#fff;color:var(--ink);}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.2);color:#fff;font-size:1.6rem;cursor:pointer;transition:.2s;}
.lb__nav:hover{background:#fff;color:var(--ink);}
.lb__prev{left:24px;} .lb__next{right:24px;}

/* ============================================================
   滚动显现
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:960px){
  .about__grid,.team__grid{grid-template-columns:1fr;gap:40px;}
  .feature__stage{grid-template-columns:1fr;}
  .feature__side{grid-template-rows:none;grid-template-columns:1fr 1fr;}
  .gallery{columns:2;}
}
@media (max-width:760px){
  .section{padding:80px 0;}
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:26px;padding:40px;
    background:var(--paper);box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .35s ease;}
  .nav__links.open{transform:none;}
  .nav__links a{font-size:1.25rem;}
  .nav__toggle{display:block;z-index:1001;}
  .nav.menu-open .nav__toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav.menu-open .nav__toggle span:nth-child(2){opacity:0;}
  .nav.menu-open .nav__toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .svc-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .founders{grid-template-columns:1fr;}
  .mascot--globe,.mascot--brush{display:none;}
  .mascot--puzzle{width:150px;top:auto;bottom:2%;right:-10px;}
  .mascot--screen{display:none;}
  .hero{padding:140px 0 90px;}
}
@media (max-width:480px){
  .gallery{columns:1;}
  .clients__names li{font-size:.85rem;}
}

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